मैं एक मुख्य div मिल गया है, 150px 500px लंबा द्वारा व्यापक में ऑफसेट ऑटो (या स्क्रॉल) के एक अतिप्रवाह जो छवियों का एक गुच्छा रखा है, इस प्रकार के साथ:अजीब, jQuery ui खींचने योग्य
<div id="images" style="width: 150px; height: 500px; overflow: scroll;">
<img src="images/swift1.jpg" style="width: 150px; height: 150px;" />
<img src="images/swift2.jpg" style="width: 150px; height: 150px;" />
<img src="images/swift3.jpg" style="width: 150px; height: 150px;" />
<img src="images/swift4.jpg" style="width: 150px; height: 150px;" />
<img src="images/swift5.png" style="width: 150px; height: 150px;" />
<img src="images/swift6.JPG" style="width: 150px; height: 150px;" />
</div>
मैं मैंने इस div से छवियों को किसी अन्य div में खींचने और उन्हें छोड़ने के लिए JQuery UI ड्रैगगेबल लागू किया है।
$('#images img').draggable({
revert:true,
proxy:'clone',
snap: true,
onDrag: function(e, ui) {
console.log('test');
}
});
$('.drop_image').droppable({
onDragEnter:function(){
$(this).addClass('over');
},
onDragLeave:function(){
$(this).removeClass('over');
},
onDrop:function(e,source){
$(this).removeClass('over');
if ($(source).hasClass('assigned')){
$(this).append(source);
} else {
var c = $(source).clone().addClass('assigned');
$(this).empty().append(c);
c.draggable({
revert:true
});
$(this).children('img').css('width', '100%').css('height', '100%');
}
}
});
हालांकि, div पर पुस्तक की वजह से किसी भी चित्र जो #images, जब घसीटा की प्रारंभिक निचली सीमा से नीचे हैं, काफी माउस कर्सर द्वारा जो कुछ भी भरपाई वे मूल div में था से दूर कर रहे हैं। जब भी प्राप्तकर्ता div पर माउस रखा जाता है तब भी वे सही ढंग से गिराए जाते हैं, लेकिन जब तक इसे गिराया नहीं जाता है तब तक खींची गई छवि एक अजीब जगह में प्रदर्शित होती है।
कोई भी इसे सही करने का तरीका जानता है? मुझे लगता है कि मुझे ड्रैग ऑब्जेक्ट की स्थिति को माउस कर्सर स्थिति के बराबर होने के लिए ऑनड्राब कॉलबैक में कुछ करना है, लेकिन मुझे यकीन नहीं है कि वाक्यविन्यास क्या होना चाहिए।