ich eine Haupt div habe, 150px breit und 500px hoch, mit einem Überlauf von Auto (oder blättern), die eine Reihe von Bildern hält, also:Sonderbare in jquery ui ziehbar Offset
<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>
I habe JQuery-UI-Draggable implementiert, um Bilder aus diesem Div in ein anderes Div zu ziehen und zu löschen.
$('#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%');
}
}
});
jedoch wegen der Rolle auf der div, wird alle Bilder, die unter der ursprünglichen unteren Grenze von #Bilder sind, wenn gezogen, sind von den Mauszeiger wesentlich weg von was auch immer versetzten sie in der ursprünglichen div hatten. Sie werden immer noch ordnungsgemäß gelöscht, wenn die Maus über dem empfangenden Div platziert wird, aber das gezogene Bild wird an einem seltsamen Ort angezeigt, bis es gelöscht wird.
Wer weiß einen Weg, dies zu korrigieren? Ich nehme an, ich muss etwas im OnDrag-Callback tun, um die Position des gezogenen Objekts so festzulegen, dass sie mit der Mauszeigerposition übereinstimmt, aber ich bin mir nicht sicher, was die Syntax sein soll.