jQuery droppable issue

Question

Я написал код jQuery, который позволяет пользователю создавать 2 окна на экране, а затем перетаскивать их один в другой. С точки зрения HTML это будет выглядеть так ...

<div id="1"> 
    <div id="2"> 
    </div> 
</div> 

Если я затем создать еще одну коробку и перетащить его на поле 2 и поместите его, он всегда упал в поле 1 (т.е. вставку 2 родительской). То, что я хочу это ...

<div id="1"> 
    <div id="2"> 
     <div id="3"> 
     </div> 
    </div> 
</div> 

... но то, что я получаю это ...

<div id="1"> 
    <div id="2"> 
    </div> 
    <div id="3"> 
    </div> 
</div> 

Вы [ИСПОЛЬЗУЕМЫЕ СМОЖЕТ] может увидеть это здесь происходит. .. http://acarna.com/editor.php < - Я исправил проблему ... см. Мой ответ ниже

Нажмите кнопку «H» вверху слева, чтобы создать поле. Возьмите серый квадрат в правом верхнем углу окна, чтобы перетащить его вниз на страницу. Наведите указатель мыши на край или угол окна и измените его размер.

Затем нажмите «H» еще раз, чтобы создать окно 2. Перетащите коробку 2 в поле 1. Это работает правильно. Если вы используете Firefox, вы можете видеть окно, поскольку оно добавлено в поле 1 при наведении курсора мыши.

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

Есть ли какой-то трюк, который у меня отсутствует, чтобы установить jQuery в поле 2, когда поле 3 перетаскивается над ним, и вместо этого он добавил туда?

Answer 1

У меня только был момент ясности после борьбы с разреженной документацией jQuery UI (ах).

Опция droppable 'greedy' определяет, где объект будет приземляться, когда он будет сброшен на дереве отбрасываемых объектов.

Если установлено значение false (по умолчанию), то выпавший объект приземлится на самый низкий объект сбрасываемой в дереве. Если установлено значение true, то выпавший объект будет приземляться на первый (то есть самый высокий) droppable-объект в дереве.

Это может быть продемонстрировано с использованием следующей маркировки в качестве примера. Представьте себе следующие дивы все Droppable объекты ...

<div id="bottom_container"> 
    <div id="level_2_container"> 
     <div id="level_3_container"> 
     </div> 
    </div> 
</div> 

перетаскиваемый объект (данный идентификатор = "all_new_container" ниже) упал на DIV # level_3_container. Вот разметки, результаты, если жадное ложно (т.е. по умолчанию) ...

<div id="bottom_container"> 
    <div id="level_2_container"> 
     <div id="level_3_container"> 
     </div> 
    </div> 
    <div id="all_new_container"> 
    </div> 
</div> 

А вот разметка, что результаты, если жадный установлена ​​истине ...

<div id="bottom_container"> 
    <div id="level_2_container"> 
     <div id="level_3_container"> 
      <div id="all_new_container"> 
      </div> 
     </div> 
    </div> 
</div> 

Если у вас есть Firebug вы смотрите выше происходят, как вы удаляете объекты в другие объекты здесь ... http://acarna.com/editor.php

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