jquery-ui - 禁用 droppable 中的图像的放置

Question

我有一张从页面的一部分拖放到 DIV 中的图像。没问题。但是当我只是在它的新 DIV 主页中拖动图像时，我仍然会触发 DIV 的放置处理程序。有没有一种简单的方法来禁用已经在可放置元素中的放置处理程序？

谢谢

Answer 1

您可以向被删除的元素添加一个类，然后在 drop 函数中检查该元素是否具有该元素，如果有则退出 drop 函数。

在我的示例中，我将元素克隆到一个新元素中，如果您使用拖动元素，则必须更改所选元素。

代码：

$(document).ready(function () {

    $(".doodad").draggable({
        helper: 'clone',
        scroll: true
    });

    $(".dropped").draggable({
        containment: ".box"
    });
    $(".box").droppable({
        accept: ".doodad",
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        drop: function (e, ui) {
            if ($(ui.draggable).hasClass('copied')) return
            alert('dropped');
            var droppedItem = $(ui.draggable).clone().addClass('copied').css({
                position: "relative",
                top: $(ui.helper).position().top - $(this).position().top,
                left: $(ui.helper).position().left - $(this).position().left
            }).draggable({
                containment: ".box"
            });
            $(this).append(droppedItem);

        }
    });
});

演示：http: //jsfiddle.net/IrvinDominin/hLxAd/