2

リストが欲しい

アイテム1アップ アイテム2アップ

これはショート可能で、項目 2 をドラッグして緑の div を赤の div の上に移動するとします。つまり、Z インデックスが高くなります。

これまでの動作を確認するためのリンクです.. http://jsfiddle.net/2vgRY/

よろしくお願いします！

編集：

最後に1つだけ！3番目のアイテムを配置して2番目の上に配置すると、最初のアイテムを一番上に置き、次に3番目、次に2番目.. http://jsfiddle.net/2vgRY/3/

並べ替えのようなもので、アイテム 3 を上にドラッグしてから div 3 が表示され、アイテム 2 をアイテム 1 の下にドラッグし、次に div 1 を最初に、次に div 2 をその下にドラッグし、次に div 3 を最後にドラッグします..

4

1 に答える 1

1

あなたの質問を正しく理解していれば、jQuery UI sortable() start eventを使用できます:

この実用的なフィドルの例を参照してください!

Jクエリ

$(function() {
    $( "#sortable" ).sortable({
        start: function(event, ui) {
            // clear z-index
            $('span[class^="target_"]').css({
                "z-index" : '0'
            });

            // bring up the target
            var item = ui.item.attr('class').split(' ')[0];
            $('.' + item.replace("item", "target")).css({
                "z-index" : 10000
            });
        },
    });

    $( "#sortable" ).disableSelection();
});

HTML

<ul id="sortable">
  <li class="item_1 ui-state-default">
    <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1 up
  </li>
  <li class="item_2 ui-state-default">
    <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2 up
  </li>
</ul>
<span class="target_1" style="background:red;padding:30px; position:absolute; float:left;">1</span>
<span class="target_2" style="background:green; padding:30px; margin-left:10px; position:absolute; float:left;">2</span>

要素を識別できるようにitem_x、クラスとクラスを追加したことに注意してください。target_x

于 2012-05-31T10:46:20.603 に答える