1

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

http://jsfiddle.net/MnSRd/8/

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?
    }
});
4

2 回答 2

1

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

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

阅读评论后，我相信您想要从 sortable 中使用helper: 'original'默认帮助程序而不是helper: 'clone'.

于 2013-01-27T15:25:21.690 回答
0

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

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

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

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

于 2013-01-27T15:56:25.663 回答