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()もう一度。それを DOM から完全に削除するので、それを元に戻すか、単に jQuery Updated フィドルremove()を使用しない限り、元に戻すことはできません。clone()detach() 

$('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'。

于 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 に答える