Ограничить jQuery перетаскиваемыми элементами из перекрытия/столкновения с элементами-братьями

Question

Мне нужно использовать пользовательский интерфейс jQuery, чтобы ограничить область сдерживания для объекта с перетаскиванием с некоторым дополнительным ограничением. Мне нужно, чтобы перетаскиваемый элемент перекрывался с другими элементами внутри одного контейнера. Мне нужно разрешить движение в области «moveInHere», но не «butNotHere». Является ли это возможным?

<div id="moveInHere"> 

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

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

</div> 


<script type="text/javascript"> 

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

</script> 

Answer 1

Edit: Новое решение

Я нашел плагин для это называется JQuery UI Draggable Collision. Используя это, реализация желаемой функциональности становится тривиальной. Смотрите следующий пример jsFiddle: http://jsfiddle.net/q3x8w03y/1/ (Это использует версию 1.0.2 из JQuery UI Draggable столкновения, наряду с JQuery 1.7.2 и JQueryUI 1.1.18.)

Вот код:

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

Старого Решение

должен работать. Тем не менее, у него есть сбой. Как только divs сталкиваются, вы должны «переписать» div, который вы перетаскиваете, что может быть немного раздражающим. Возможно, кто-то еще будет знать, как это исправить. Вы можете увидеть мой пример 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

Это заняло у меня довольно много возиться. В основном я создал droppable на элементе, которого вы хотите избежать, а затем установите логическое значение, когда перетащить его. Затем я использую это в недокументированной функции отмены возврата, чтобы отменить падение. Он работает только тогда, когда #dragMe полностью над #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; 
     } 
    }); 
}); 

Отъезд рабочая демо и не стесняйтесь играть с ним: http://jsfiddle.net/H59Nb/31/