JQuery UI Drop Disable на некоторых элементах

Question

У меня есть jQuery UI перетаскиваемый код, который я пишу с помощью jslumb.

проблема заключается в том, что пользователь может отбросить круг на другом круге, я не хочу его разрешать, просто мне нужно вернуться, если пользователь перетащит круг на другой круг.

Я пишу некоторые коды для этого. но я не работаю для меня, он всегда возвращает сброшенный круг. вот мой пример URL

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