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

<p>я использую jquery ui, который можно перетаскивать, и, в конце концов, можно сбрасывать, чтобы сделать возможным упорядочивание картинок в разных полях.</p><p>когда я перетаскиваю изображение из коробки, оно появляется под всеми остальными элементами, как только покидает свой прямой контейнер.</p><p>в то время как поиск в google мне удалось найти, чтобы добавить:</p><pre><code> helper: 'clone', appendto: "body" </code></pre><p>это делает так, что перетаскиваемый объект отображается поверх всех элементов, но оставляет оригинальную копию в поле, и я этого не хочу.</p><p>есть ли способ, которым я могу заставить элемент оставаться на вершине всего, когда его перетаскивают? я пробовал высокий z-индекс безрезультатно.</p><p>вот jsfiddle, который показывает первый элемент перетаскивания позади второго. это не проблема наоборот. я не могу изменить положение относительно содержащихся div'ов, не нарушая много других вещей.</p><p> <a href="http://jsfiddle.net/cbwhx/6/">http://jsfiddle.net/cbwhx/6/</a> </p>

<p>я обнаружил несколько проблем с вашим кодом, я думаю, что я решил их и заставил работать.</p><p><strong> <a href="http://jsfiddle.net/apaul34208/cbwhx/7/">рабочий пример</a> </strong></p><p>сначала исправьте ваш html:</p><pre><code><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> </code></pre><p>далее вы, вероятно, захотите использовать <a href="http://api.jqueryui.com/draggable/#option-stack">опция стека</a> :</p><pre><code>$('.draggable').draggable({ revert: "invalid", snap: ".draggablecontainer", stack: ".draggable" }); $('.draggablecontainer').droppable() </code></pre><p>из <a href="http://api.jqueryui.com/draggable/#option-stack">документация api</a> :</p><blockquote> <p><strong> stack </strong><br> управляет z-индексом набора элементов, соответствующих селектору, всегда переносит перетаскиваемый в данный момент элемент вперед.</p> </blockquote>

<p>хотя существует опция - '<strong> stack </strong>', существующая при запуске draggables, но она не работает должным образом, поэтому я написал небольшую библиотеку dragtofront, играющую с z -индекс. ниже приводится ссылка на plunkr.</p><p> <a href="https://embed.plnkr.co/mjqkxsjhf1umg7r2olqn/">https://embed.plnkr.co/mjqkxsjhf1umg7r2olqn/</a> </p>