остановить падение и вернуться на свое место

Question

Я хочу добавить условие, когда у меня есть столкновение с остановкой и вернуть его в последнюю позицию. collisionDivDetect возвращает true, если обнаруживает столкновение между div (f, элементами [i]).

Это мой код: https://jsfiddle.net/tmedamine/60f30bwr/2/

function clonage(elem) { 
    var fla = false; 
    this.c = "#"+elem; 
    $(c).draggable({revert: 'invalid',helper: 'clone',cursor: 'move',tolerance: 'fit' }); 
    var rs ; 
    $("#surface").droppable({ 
     drop: function(e, ui) { 
      x = ui.helper.clone(false); 
      x.draggable({ 
       tolerance: 'intersect', 
       helper: 'original', 
       containment: 'parent', 
       tolerance: 'fit' 
      }); 

      x.find('.ui-resizable-handle').remove(); 
      F = x[0].id; 
      x.appendTo(".surface"); 
      ui.helper.remove(); 
      for(i in elements){ 
       if(elements[i]!=F && elements[i]!="surface" && elements[i]!="menu") 
       {  
        fla = collisionDivDetect(F,elements[i]); 
        if(fla == true){ 
         console.log('collision'); 
         /** Stop Drop and return to last position ***/ 
        } 
       } 
      } 
     } 
    }); 
} 

https://jsfiddle.net/tmedamine/60f30bwr/2/

Answer 1

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

function clonage(elem) { 
this.c = "#"+elem; 
$(c).draggable({revert: 'invalid',helper: 'clone',cursor: 'move',tolerance: 'fit' }); 
$(".droppable").droppable({ 
    drop: function(e, ui) { 
     x = ui.helper.clone(false); 
     if(!inArray(elements,x[0].id)){ 
      if(!(ui.draggable[0].className).indexOf('tableRonde')){ 
       x[0].id = 'tableRonde'+nbtr; nbtr++; rs = nbtr-1; 
       param= 'tableRonde'+rs;tname = ntr+rs; 
       x.attr('name',tname); 
       x.html(tname +' <a href="#" onClick="openPopup('+param+')">Editer</a>'); 
       x[0].className = 'tableRonde1'; 
      }else if (!(ui.draggable[0].className).indexOf('table')){ 
       x[0].id = 'table'+nbt; nbt++;rs = nbt-1; 
       param= 'table'+rs;tname = nt+rs; 
       x.attr('name',tname); 
       x.html(tname +' <a href="#" onClick="openPopup('+param+')">Editer</a>'); 
       x[0].className = 'table1'; 
      }else if (!(ui.draggable[0].className).indexOf('zone')){ 

       x[0].id = 'zone'+nbz; nbz++;rs = nbz-1; 
       param= 'zone'+rs;tname = nz+rs; 
       x.attr('name',tname); 
       x.html(tname +' <a href="#" onClick="openPopup('+param+')" >Editer</a>'); 
       x[0].className = 'zone1'; 

      }else if (!(ui.draggable[0].className).indexOf('plan')){ 
       x[0].id = 'plan'+nbp; nbp++;rs = nbp-1; 
       param= 'plan'+rs;tname = np+rs; 
       x.attr('name',tname); 
       x.html(tname +' <a href="#" onClick="openPopup('+param+')">Editer</a>'); 
       x[0].className = 'plan1'; 
      } 
      elements.push(x[0].id); 
     }; 
     x.draggable({ 
      tolerance: 'intersect', 
      helper: 'original', 
      containment: 'parent', 
      tolerance: 'fit', 
      revert: 'invalid'     
     }); 
     x.find('.ui-resizable-handle').remove(); 
     ui.helper.remove(); 
     x.resizable({ 
      minHeight: 60, 
      minWidth: 50, 
      containment: 'parent' 
     }); 
     F = x[0].id; 
     x.attr('width','0px'); 
     x.attr('heigth','0px'); 
     x.appendTo(".surface"); 
    }, 
    accept:function(){ 
     fla = true; 
     for(i in elements){ 
      if(elements[i]!=F && elements[i]!="surface" && elements[i]!="menu" && elements[i].indexOf("zone") && F.indexOf("zone")) 
      {  
       if(collisionDivDetect(F,elements[i])){ 
        fla = false; 
       } 
       if(collisionDivDetect(elements[i],F)){ 
        fla = false; 
       } 
      } 
     } 
     return fla; 
    } 

}); }