我有多个可拖动物品和可放置物品。将可拖动对象放到可放置对象上时,会触发drop
事件。现在在放置之后:我可以将可拖动对象移动(或拖动)到可放置对象本身上。
情况1:如果我将可拖动对象从可放置对象中移出很多,则它将返回到其原始位置。
情况2:如果我将可拖动的物体从可放置的物体中移出一点,然后将其留在那里,它只是位于可放置的物体上,而不会返回其原始位置。
在情况1和情况2中,都触发out
事件。但是,在情况2中,在out
事件之后,我需要找出何时可拖动对象只是放置在可放置对象上而不返回其原始位置。在这种情况下,不会触发任何drop
事件。 over
应该只触发一次。但是触发了stop
事件。而且我找不到从可拖动对象的stop
事件中访问可放置对象的方法。
那么,我如何找出与之相关联的任何可访问droppable的事件?还是其他方式?
您可以找到小提琴here。我在这里粘贴JS:
$(function() {
$("#draggable>div").draggable({
start: function() {
$(this).css({
display: 'none'
});
},
stop: function() {
$(this).css({
display: 'block'
});
},
revert: function(dropped) {
var dropped = dropped && dropped.hasClass('slot'); //fix duplicated IDs
if (!dropped) {
$(this).appendTo($(this).data('originalParent'))
}
return !dropped;
},
revertDuration: 0, //removed glitched effect
helper: function() {
return $(this).clone().appendTo('body').show();
},
containment: '.sel_screen_left'
}).each(function() {
$(this).data('originalParent', $(this).parent())
});
$("#droppable_slots>div").droppable({
tolerance:'pointer',
drop: function(event, ui) {
var $this = $(this),
containsDropped = $this.find('.ui-draggable');
if (containsDropped.length) containsDropped.appendTo(containsDropped.data('originalParent'));
$this.empty();
$this.append(ui.draggable);
var width = $this.width();
var height = $this.height();
var cntrLeft = (width / 2) - (ui.draggable.width() / 2);
var cntrTop = (height / 2) - (ui.draggable.height() / 2);
ui.draggable.css({
left: cntrLeft + "px",
top: cntrTop + "px"
});
}
});
});