Влияние z-index на перетаскивание между двумя элементами

Question

У меня есть два контейнера div и я хочу перетаскивать элементы между ними. Я могу перетаскивать элементы из второго контейнера в первый, но не наоборот. Проблема заключается в том, что элементы первого контейнера имеют более низкий z-индекс, чем второй контейнер. Когда я тащу их, они скользят под вторым контейнером. Что я должен сделать, чтобы все элементы были на вершине и были перетаскиваемыми в любой контейнер, который можно бросить? Это скрипка, показывающая проблему.

http://jsfiddle.net/vfAgd/12/

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

Answer 1

Чтобы это исправить, мне пришлось удалить z-index для контейнеров.

.comdiv  { 
   padding: 0;
   margin-top: 20px;
   margin-left: 20px;
   border: 1px solid DarkKhaki;
   border-radius: 3px 3px 0px 0px;
   box-shadow: inset 0px 0px 10px DarkKhaki;
   /* z-index: 26; */
}

http://jsfiddle.net/vfAgd/17/.

Answer 2

Существует имя класса, которое jQuery UI draggable добавляет к элементам, которые перетаскивают.Этот класс удаляется после завершения перетаскивания.Этот класс называется ui-draggable-dragging.Если вы добавите высокий z-индекс в класс ui-draggable-dragging, ваша проблема будет решена.Это должно решить вашу проблему.Кажется, в вашем коде есть ошибки.Отладьте его и добавьте этот CSS.Это будет работать тогда.

 .ui-draggable-dragging{z-index:9999;}