Restringir elementos arrastrables de jQuery de la superposición/colisión con elementos hermanos

Question

Necesito usar la interfaz de usuario de jQuery para restringir el área de contención del objeto arrastrable con alguna restricción adicional. Necesito evitar que el elemento arrastrable se solape con otros elementos dentro del mismo contenedor. Necesito permitir el movimiento en el área "moveInHere" pero no en el área "peroNotHere". ¿Es posible?

<div id="moveInHere"> 

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

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

</div> 


<script type="text/javascript"> 

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

</script> 

Answer 1

edición: Nueva solución

He encontrado un plugin para esto se llama JQuery UI Draggable Collision. Al usar esto, implementar la funcionalidad deseada se vuelve trivial. Véase el siguiente ejemplo jsFiddle: http://jsfiddle.net/q3x8w03y/1/ (Esto utiliza la versión 1.0.2 de jQuery UI se pueden arrastrar colisión, junto con jQuery 1.7.2 y 1.1.18 jQueryUI.)

Aquí está el código:

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

antigua solución

El siguiente debería funcionar. Sin embargo, tiene un problema. Una vez que los divs colisionan, tienes que "regrab" el div que estás arrastrando, lo que puede ser un poco molesto. Quizás alguien más sepa cómo arreglar esto. Se puede ver mi ejemplo 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

Esto me tomó un poco de toquetear. Básicamente creé un droppable en el elemento que desea evitar, luego establezco un booleano cuando el arrastre está sobre él. Luego lo uso en una anulación de función de revertir no documentada para cancelar la caída. Sólo funciona si #dragMe es completamente sobre #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; 
     } 
    }); 
}); 

Mira la demostración de trabajo y se sienten libres para jugar con él: http://jsfiddle.net/H59Nb/31/