11

私はjquery uiをドラッグ可能に使用しており、最終的にはドロップ可能にして、写真を別のボックスに並べ替えることができます。

画像をボックスからドラッグすると、直接のコンテナーを離れると、他のすべての要素の下に表示されます。

グーグル中に、追加できることがわかりました：

   helper: 'clone',
   appendTo: "body"

これにより、ドラッグされているものがすべての要素の上に表示されますが、元のコピーがボックス内に残ったままになり、それは望ましくありません。

ドラッグされたときに要素をすべての上に置く方法はありますか? 高い z-index を試してみましたが、役に立ちませんでした。

これは、最初のドラッグ要素が 2 番目のドラッグ要素の後ろにあることを示す jsfiddle です。それは逆の問題ではありません。他の多くのものを壊すことなく、含まれているdivの相対的な位置を変更することはできません.

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

4

3 に答える 3

9

私はあなたのコードにいくつかの問題を見つけました。私はそれらを解決して動作させたと思います。

実施例

最初に 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>

次にstack オプションを使用することをお勧めします。

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

$('.draggableContainer').droppable()

APIドキュメントから：

スタック
セレクターに一致する一連の要素の z-index を制御し、現在ドラッグされているアイテムを常に前面に移動します。

于 2013-08-01T03:05:41.593 に答える
0

オプションがありますが - ドラッグ可能なものを開始するときに「スタック」が存在しますが、それは適切に機能していません。以下はplunkrリンクです

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

于 2016-08-01T10:37:01.480 に答える