javascript - 用户完成拖动元素后定位 div

Question

我有一个 list :

<ul class="draggable">
    <li><span class="drag">::</span> item 1</li>
    <li><span class="drag">::</span> item 2</li>
    <li><span class="drag">::</span> item 3</li>
</ul>

<div class="done" style="display:none;">
   Yay!
</div>

并且可以通过以下方式拖动:

var el = document.querySelectorAll('.draggable');
for (var i=0;i<el.length; i++) {
    var sortable = Sortable.create(el[i], {
        handle: '.drag',
        animation: 150,
        onUpdate: function (evt/**Event*/){
            var item = evt.item; // the current dragged HTMLElement

            // show .done here

        }
    });
}

测试jsFiddle 。

我的问题是，用户拖动项目后如何显示 .done div？

所以在 onUpdate 中，我想定位 .done div。通常，在 jQuery 中，我会做类似的事情:

jQuery(this).parent().parent().next().show();

但这显然在这里不起作用。

这里正确的做法是什么？请注意，我无法向 .done div 添加 id。

Answer 1

尝试在此上下文中使用 .closest(selector) 和 .next() 来实现您想要的，

var item = evt.item; // the current dragged HTMLElement
$(item).closest(".draggable").next(".done").show();

DEMO