jQuery Droppable:丢弃div?

kas*_*kka 7 jquery user-interface droppable

当你在可放置的DIV之外拖动一个项目时,有什么方法可以让jQuery执行一个函数?

假设我们在div中有可拖动或可排序的项目,如果它们被丢弃在父div之外,则希望它们被删除.

我知道有"out"事件但是只要你将项目拖到div之外就行了,而不是在你放下它时(释放鼠标按钮).

kas*_*kka 8

最后得到了一个合适的解决方案,即使它有点"hacky".我所做的是将前景div设置为draggables作为droppable,但使用dropover和dropout功能来确定该项是否在前景div之外.当它在div之外时,我绑定mouseup事件来执行drop功能.当它回来时我取消绑定鼠标事件,因此它不会触发.

因为在拖动时我已经按住了鼠标按钮,释放它就像丢弃我在"手"中的内容一样.

$("#foregroundDiv").droppable({
        accept: ".draggableThingy",
        tolerance: "pointer",       
        out: function(event, ui) {
            $(ui.helper).mouseup(function() {
                doSomethingTo(ui.draggable);
            });
        },
        over: function(event, ui) {
            $(ui.helper).unbind("mouseup");
        }
    });
Run Code Online (Sandbox Code Playgroud)