it-swarm.com.ru

jquery UI перетаскиваемый элемент появляется позади других элементов?

Я использую jquery ui, который можно перетаскивать, и, в конце концов, можно сбрасывать, чтобы сделать возможным упорядочивание картинок в разных полях.

Когда я перетаскиваю изображение из коробки, оно появляется под всеми остальными элементами, как только покидает свой прямой контейнер.

В то время как поиск в Google мне удалось найти, чтобы добавить:

   helper: 'clone',
   appendTo: "body"

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

Есть ли способ, которым я могу заставить элемент оставаться на вершине всего, когда его перетаскивают? Я пробовал высокий z-индекс безрезультатно.

Вот jsfiddle, который показывает первый элемент перетаскивания позади второго. это не проблема наоборот. я не могу изменить положение относительно содержащихся div'ов, не нарушая много других вещей.

http://jsfiddle.net/cBWhX/6/

8
Kyle

Я обнаружил несколько проблем с вашим кодом, я думаю, что я решил их и заставил работать.

Рабочий пример

Сначала исправьте ваш HTML:

<div id="container1" style="background-color:red;padding:20px">
    <div class="draggableContainer">
        <div class="draggable" style="background-color:blue;width:200px;height:200px;"></div>
    </div>
    <div class="draggableContainer">
        <div class="draggable" style="background-color:yellow;width:200px;height:200px;"></div>
    </div>
    <div class="draggableContainer"></div>
</div>

Далее Вы, вероятно, захотите использовать опция стека :

$('.draggable').draggable({
    revert: "invalid",
    snap: ".draggableContainer",
    stack: ".draggable"
});

$('.draggableContainer').droppable()

Из документация API :

Stack
Управляет z-индексом набора элементов, соответствующих селектору, всегда переносит перетаскиваемый в данный момент элемент вперед.

7
apaul

Хотя существует опция - ' stack ', существующая при запуске draggables, но она не работает должным образом, поэтому я написал небольшую библиотеку dragToFront, играющую с z -индекс. Ниже приводится ссылка на plunkr.

https://embed.plnkr.co/mJqkxSJhf1Umg7r2oLQN/

0
Sandeep Gantait