jQuery droppable-查找是否可拖动对象在可拖放对象本身上移动,而不会将可拖动对象移动到其原始位置

时间:2018-07-14 21:52:23

标签: jquery-ui jquery-ui-draggable jquery-ui-droppable

我有多个可拖动物品和可放置物品。将可拖动对象放到可放置对象上时,会触发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"
            });

        }
    });
});

0 个答案:

没有答案