JQuery UI - предотвратить перетаскивание перетаскивается на другой внутри div

Question

Я ищу способ предотвратить перетаскивание перетаскиваемого блока поверх другого перетаскиваемого блока и наоборот.Или, может быть, как обнаружить, что его перетаскивают по нему.

http://jsfiddle.net/J7azG/27/ Заранее спасибо.

Answer 1

Я собрал простую демонстрацию, которая обнаруживает совпадения в ваших перетаскиваемых объектах.Так как они не являются встроенной поддержкой возврата к условию в событии drop, я создал свой собственный способ сделать это.Вот jsFiddle с рабочим решением

http://jsfiddle.net/J7azG/37/

Answer 2

С опцией возврата, предоставляемой jquery draggable, вы можете изменить положение на недопустимых падениях и перекрытиях.

Я изменил ответ, данный Китом. Абрамо.

Пожалуйста, вам не нужно использовать смещение, а не положение, так как во время перекрытия положение портится.

http://jsfiddle.net/J7azG/177/ Используется опция возврата

ui.draggable.draggable('option','revert',true);
ui.draggable.draggable('option','revert',false);

Другим решением было бы сделать перетаскиваемый объект плавающим и использовать для него опцию 'недействительный'.

http://jsfiddle.net/htWV3/1219/

HTML

<div class="drop">
  <div class="drag"></div>
  <div class="drag"></div>
  <div class="drag"></div>
  <div class="drag"></div>
  <div class="drag"></div>
</div>

JS

$('.drop').droppable({
  tolerance: 'fit'
});

$('.drag').draggable({
 revert: 'invalid',
 stop: function(){
     $(this).draggable('option','revert','invalid');
 }
});

$('.drag').droppable({
 greedy: true,
 drop: function(event,ui){
    ui.draggable.draggable('option','revert',true);
 }
});

Отказ от ответственности: я не уверен, кто автор скрипки.