Limita elementi jaggery trascinabili da sovrapposizione/collisione con elementi di pari livello

Question

Devo utilizzare l'interfaccia utente jQuery per limitare l'area di contenimento per l'oggetto trascinabile con qualche restrizione aggiuntiva. Ho bisogno di impedire che l'elemento trascinabile si sovrapponga ad altri elementi all'interno dello stesso contenitore. Devo consentire il movimento nell'area "moveInHere" ma non "butNotHere". È possibile?

<div id="moveInHere"> 

    <div id="dragMe"> </div> 

    <div id="butNotHere"> </div> 

</div> 


<script type="text/javascript"> 

    $("#dragMe").draggable({ 
     containment: "#moveInHere" 
    }); 

</script> 

Answer 1

Edit: nuova soluzione

ho trovato un plugin per questo chiamato JQuery UI Draggable Collision. Usando questo, l'implementazione della funzionalità desiderata diventa banale. Vedere l'esempio seguente jsFiddle: http://jsfiddle.net/q3x8w03y/1/ (Questo utilizza la versione 1.0.2 di jQuery UI Draggable Collision, insieme con JQuery 1.7.2 e 1.1.18 jQueryUI.)

Ecco il codice:

$("#dragMe").draggable({ 
    obstacle: "#butNotHere", 
    preventCollision: true, 
    containment: "#moveInHere" 
}); 

vecchia soluzione

Di seguito dovrebbe funzionare. Ha un problema tecnico, però. Una volta che le immersioni si scontrano, devi "regrab" il div che stai trascinando, il che può essere un po 'fastidioso. Forse qualcun altro saprà come risolvere questo problema. Si può vedere il mio esempio jsFiddle here: http://jsfiddle.net/MrAdE/8/

var prevOffset, curOffset; 
$("#dragMe").draggable({ 
    drag: function(e,ui) { 
     prevOffset= curOffset; 
     curOffset= $.extend({},ui.offset); 
     return true; 
    } 
}); 

$("#butNotHere").droppable({ 
    greedy: true, 
    over: function(e,ui) { 
     ui.helper.offset(curOffset= prevOffset).trigger("mouseup"); 
    }, 
    tolerance: "touch" 
});​ 

Answer 2

Questo mi ha preso un po 'di giocherellare. Fondamentalmente ho creato un droppable sull'elemento che si desidera evitare, quindi impostare un valore booleano quando il trascinamento è sopra di esso. Quindi lo uso in una funzione di annullamento della copia non documentata per annullare il rilascio. Funziona solo se #dragMe è completamente sopra #butNotHere:

$(document).ready(function(){ 
    var shouldCancel = false; 
    $('#dragMe').draggable({ 
     containment: '#moveInHere', 
     revert: function(){ 
      if (shouldCancel) { 
       shouldCancel = false; 
       return true; 
      } else { 
       return false; 
      } 
     } 
    }); 
    $('#butNotHere').droppable({ 
     over: function(){ 
      shouldCancel = true; 
     }, 
     out: function(){ 
      shouldCancel = false; 
     } 
    }); 
}); 

Controllare la demo di lavoro e si sentono liberi di giocare con lui: http://jsfiddle.net/H59Nb/31/