пользовательский интерфейс jquery - предотвращает перетаскивание перетаскиваемого на другой внутри удаляемого div

#drag-and-drop #jquery-ui-draggable

#перетаскивание #jquery-ui-draggable

Вопрос:

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

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

1. Вы пытаетесь предотвратить перетаскивание на другой или быть отброшенным на другой?

2. Привет, да, вы можете перетащить его на перетаскиваемый, но не на него! В случае сбоя он будет возвращен на свою последнюю позицию.

3. Любая помощь будет оценена =)

Ответ №1:

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

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

1. @Keith. Abramo После нескольких перетаскиваний это решение запутывается и не всегда работает. Определенно, происходит ошибка. Иногда перетаскиваемый элемент возвращается обратно, иногда нет. Иногда он застревает поверх другого перетаскиваемого элемента, а затем продолжает возвращаться назад, когда вы пытаетесь перетащить его обратно. То же самое и с первым решением @pravin. Это просто не работает. Решение, которое он опубликовал в своих комментариях, работает хорошо, особенно если вы добавите tolerance: 'touch' к удаляемым параметрам.

Ответ №2:

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

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

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

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

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

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

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>

 $('.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);
 }
});

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

1. Другой хороший пример заключается в следующем (не уверен, кто автор, хотя) Сделайте перетаскивание удаляемым и верните любой элемент, который был удален на нем. jsfiddle.net/htWV3/1219

2. Честно говоря, ваше решение в приведенном выше комментарии должно быть ответом. Вышеуказанные решения, которые опубликованы в качестве ответов, работают не очень хорошо. Они действительно глючные и с изъянами. Вы должны повторно опубликовать это в качестве ответа.