在某些元素上禁用 JQuery UI Drop Disable

Question

我有一个 jQuery UI 可拖动代码，我用 jslumb 编写。

问题是用户可以将圈子放在另一个圈子上，我不想允许它， 如果用户将圆圈拖放到另一个圆圈上，我只需要还原。

我为此编写了一些代码。但是这对我不起作用，它总是恢复掉线。 这是我的示例网址

http://webxtreams.net/demoprofiles004/circledragger.html

这是我在火上运行的 js 代码

$(".circle").draggable({
    revert: 'invalid'
});

$(".circle").droppable({
    accept: function(el) {        
        return el.hasClass('.circle');
    }
});

请帮我做。

还有一个小问题 - 我们可以在此跟踪还原事件吗，我需要在还原圆圈时重新绘制线条:)

Answer 1

这里正在工作jsFiddle

首先为您的可拖动事件设置选项：

    var revTest=false;
    var options = {
                revert: function(socketObj){
                if(socketObj === false){ //when circle is not over circle 
                    revTest = false; //we don't want to revert
                    return false;
                }else{    //when circle is over circle
                     revTest = true; //revert the action
                     return true;
                }
            },
            scope:"Circle",
            stop: function(e , ui){
                   if(revTest === true){
                      alert("Circle cannot overlay Circle");
                      jsPlumb.repaint(this.id); // needed if the element is associated with jsPlumb endpoints or connections
                   }
            }
        };

现在将选项添加到您的可拖动元素中：

jsPlumb.draggable($("#Circle2"),options);

对于可放置事件：

$("#Circle1").droppable({scope:"Circle"});