1

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

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

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

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

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

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

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

请帮我这样做。

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

4

1 回答 1

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"});
于 2014-02-07T12:24:07.583 回答