2

我想要一份清单

项目 1 向上 项目 2 向上

这将是短的，当您拖动第 2 项以使绿色 div 高于红色 div 时。意思是z-index会更高！

是我到目前为止看到它工作的链接.. http://jsfiddle.net/2vgRY/

提前谢谢大家！

编辑：

只有最后一件事！当我放置第三个项目并将其放在第二个上方时，我希望第一个仍然在顶部，然后是第三个，然后是第二个 .. http://jsfiddle.net/2vgRY/3/

它就像一个排序的东西，你将项目 3 向上拖动，然后 div 3 出现，你将项目 2 拖到项目 1 下方，然后 div 1 首先是 div 2，然后是 div 3 最后..

4

1 回答 1

1

如果我正确理解了您的问题，您可以使用 jQuery UI sortable() start 事件：

请参阅此工作小提琴示例！

查询

$(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 回答