2

来源：

<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 力量：

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

我知道要获得当前拖动元素的对象，我只需要做以下事情：

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

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

例如，如果我将第一个 li 拖动到新位置（它将是 2nd 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;

        }            

    }


 });

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

4

1 回答 1

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>

我不确定这个解决方案是否正是您想要的……如果我不清楚，您可以问我问题。

于 2012-09-13T05:08:30.157 回答