某些元素的JQuery UI拖放禁用

Question

我有一個jQuery UI可拖動的代碼，用jslumb編寫。

問題是用戶可以在另一個圓圈上拖放圓圈，我不想讓它， 只需要將用戶在另一個圓圈上拖放圓圈即可恢復。

我爲此寫了一些代碼。但它不適合我，它總是回覆掉落的圈子。 這裏是我的榜樣網址

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

這裏是js代碼我火運行的BUG

$(".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"});