Question

我的元素样式取决于元素顺序。由于jQuery UI在拖动帮助器时保留原始项目，因此隐藏元素会破坏样式。我可以在启动拖动事件时删除ui.item。但是，如何在删除元素后恢复该元素？

HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

ul { height: 50px; }
li { float: left; width: 50px; height: inherit; background: #ccc; margin: 0 10px 0 0; }
li.placeholder { background: #f00; }
li:nth-child(1):before { content: '1'; }
li:nth-child(2):before { content: '2'; }
li:nth-child(3):before { content: '3'; }
li:nth-child(4):before { content: '4'; }
li:nth-child(5):before { content: '5'; }

的JavaScript

$('ul').sortable({
    helper: 'clone',
    placeholder: 'placeholder',
    start: function (e, ui) {
        console.log(ui.item.remove()); // temporary remove
    },
    beforeStop: function (e, ui) {
        // how to bring the item back?
    }
});

Answer 1

您可以先hide()该项目，然后再show()。 remove()完全将其从DOM中删除，因此您无法将其恢复，除非您clone()，然后将其附加回来或仅使用jQuery detach() Updated fiddle.

$('ul').sortable({
    helper: 'clone',
    placeholder: 'placeholder',
    start: function (e, ui) {
        ui.item.hide(); // temporary remove
    },
    beforeStop: function (e, ui) {
        ui.item.show();
    }
});

阅读完评论后，我相信您对可排序的内容是使用helper: 'original'这是默认助手，而不是helper: 'clone'。

Answer 2

虽然这可能不是每个人的答案，但它可能会解决任何类似的问题。

$('ul').sortable({
    helper: 'clone',
    placeholder: 'placeholder',
    start: function (e, ui) {
        ui.item.appendTo(ui.item.parent());
    }
});

http://jsfiddle.net/MnSRd/11/

我将其附加到父容器的末尾，而不是删除UI元素。因此它对元素样式没有任何影响。

如何恢复已删除的ui.item？

2 个答案: