droppable чувствителен к перетаскиваемым объектам, несмотря на то, что находится на другом уровне стека

Question

droppable чувствителен к перетаскиваемым объектам, несмотря на то, что находится на другом уровне стека

0

Представьте себе эту базовую перетаскиваемую/отбрасываемую настройку:

<div class="container">
    <div id="dropArea"></div>
</div>
<div id="itemBox">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

#dropArea - это droppable.

#itemBox >.item - draggables.

По какой-то причине droppable реагирует на draggable, даже draggable даже не был вытащен из #itemBox.

Посмотрите эту скрипту для живого примера.

Я немного озадачен этим, хотя я уверен, что это совершенно правильно. Это просто мое непонимание того, как, по-видимому, ведет себя draggable/droppable, это приводит меня к этой проблеме.

Я попытался добавить перетаскиваемый элемент в body а также в #itemBox но эффект остается тем же. Я также пытался играть с различными настройками z-index (давая droppable более низкий z-index чем #itemBox), но безрезультатно.

Почему это происходит и как я могу избежать этого? Мне нужно, чтобы droppable реагировал только один раз, когда draggable фактически покинул #itemBox.

SquareCat 31 март 2014, в 11:50

Источник

Теги:

jquery

css

jquery-ui-droppable

z-index

jquery-ui-draggable

1 ответ

Ещё вопросы

MrNobody · Answer 1 · 2014-04-01T05-30-00.000Z

Вот обновленный jsFiddle

Добавлена возможность droppable itemBox и отключена dropArea, когда элемент находится над itemBox. Образец кода:

$('#itemBox').droppable({
   hoverClass: 'dragHover',
   over:function(){
      $('#dropArea').droppable('disable').removeClass('ui-state-disabled dragHover');    
   },
   out:function(){
      $('#dropArea').droppable('enable').addClass('dragHover');
   }
});