Question

来源：

<ul class="supercategory">
    <li>
    <div class="supcat">
        <h4>
        <a class="new" href="/header1.html">header 1</a>
        </h4>
        <ul class="category">
            <li><a href="item1.html">Item 1</a></li>
            <li><a href="item2.html">Item 2</a></li>
        </ul>
    </div>
    </li>
    <li style="" class="">
    <div class="supcat">
        <h4>
        <a class="new" href="/header2.html">Header 2</a>
        </h4>
        <ul class="category">
            <li><a href="item1.html">Item 1</a></li>
            <li><a href="item2.html">Item 2</a></li>
        </ul>
    </div>
    </li>
</ul>
<div id="test">
</div>

一点点css：

ul.supercategory { background: lightblue; }
.new{ background: yellow; }

和jQuery UI force：

$('.supercategory').sortable({
            cursor: 'move',
            axis: 'y',
            revert: true,
            stop: function (event, ui) {  }
        });

我知道要获取当前拖动元素的对象，我只需要做一些事情：

stop: function(event, ui) { var obj = ui.item; }

但是如何获取放置元素的对象而不是我拖到新位置？

例如，如果我将第一个li拖到新位置（它将是第二个li），第二个li被放置在该位置而不是我的位置，如何在jQuery UI中将此元素作为对象进行排序？

注意我的小提琴：http://jsfiddle.net/Stasonix/jCMuQ/1/

upd 1.首先是小提琴。 http://jsfiddle.net/Stasonix/jCMuQ/5/

比代码：

var is_received = false;

$('.supercategory').sortable({
            cursor: 'move',
            axis: 'y',
            revert: true,
            receive: function(event, ui){ is_received = true;  },
            stop: function (event, ui) {

                is_received = true;

            },

    deactivate: function(event, ui) {

        if (is_received){

            $('#test').text(ui.item.find('.new').attr('href'));

            is_received=false;

        }            

    }


 });

嗯......仍然需要一个解决方案，它似乎不起作用。

Answer 1

您可以尝试通过跟踪对象的索引/位置以及使用事件start和deactivate来获取您拖动的新对象：

// Define static variables to keep track of the index / position of your dragged object
var prev_index =  null;   // Previous index / position of your dragged object
var next_index = null;    // Next index / position of your dragged object

$('.supercategory').sortable({
    cursor: 'move',
    axis: 'y',
    revert: true,
    start : function(event, ui) {
        prev_pos = ui.item.index();
    },
    deactivate : function(event, ui) {
        next_pos = ui.item.index();
    },
    stop : function(event, ui) {
        // Your new object: "el"
        var el = null;

        if(next_pos > prev_pos)
            el = $(".mydrag").get(next_pos-1); // Your previous object has been dragged! Your previous object was initially above your new object (Dragging downward)
        else if(next_pos<prev_pos)
            el = $(".mydrag").get(next_pos+1); // Your previous object has been dragged!  Your previous object was initially below your new object (Dragging upward)
        else
            el = $(".mydrag").get(prev_pos);   // Your previous object was not dragged and is at the same position

        $('#test').text($(el).find('.new').attr('href'));
    }
});

事情是，

如果您的对象被成功拖动，取决于您是向下还是向上拖动对象，您要查找的新对象将位于拖动对象的上方或下方，因此：在您拖动的新索引/位置处对象-1 / +1
但是，如果您的对象未成功拖动，则“没有新对象”，因此您的新对象就是您拖动的对象。

确保将课程.mydrag添加到可拖动的li元素中：

<ul class="supercategory">
    <li class="mydrag">
        <div class="supcat">
            <h4>
                <a class="new" href="/header1.html">header 1</a>
            </h4>
            <ul class="category">
                <li><a href="item1.html">Item 1</a></li>
                <li><a href="item2.html">Item 2</a></li>
            </ul>
        </div>
    </li>
    <li class="mydrag">
        <div class="supcat">
            <h4>
                <a class="new" href="/header2.html">Header 2</a>
            </h4>
            <ul class="category">
                 <li><a href="item1.html">Item 1</a></li>
                 <li><a href="item2.html">Item 2</a></li>
             </ul>
        </div>
    </li>
</ul>
<div id="test">
</div>

我不确定这个解决方案是否正是您正在寻找的... 如果我不清楚，你可以问我一个问题。

如何获取新元素的对象，而不是jQuery UI中的先前对象可排序？

1 个答案: