6

ドラッグ可能なアイテムのリストがあり、並べ替え可能なコンテンツ ブロックにドラッグできるようにしたいと考えています。ここに私のマークアップがあります:

<div class='items'>
    <div class="one">One</div>
    <div class="two">Two</div>
</div>

<div class="content">
    <div class="block">Foo</div>
    <div class="block">Bar</div>
</div>

問題は、ドラッグが開始されるとすぐにドラッグされたアイテムがブロックになり、ドロップされたときにブロックのままになることです。私はこれを試しました：

$('.items div').draggable({
    helper: function(e) {
        return $('<div>').addClass('block').text( $(e.target).text() );
    },
    connectToSortable: ".content"
});

$('.content').sortable();​

フィドル: http://jsfiddle.net/MF4qu/

しかし、ブロックのようなカスタム ヘルパーを作成しても、ドロップするとすぐに元のドラッグされた要素に戻ります。サンプルページにブロックを正しく挿入する方法を知っている人はいますか? すでに UI API を調べましたが、わかりません。

​
4

1 に答える 1

11

ドラッグ可能な要素がソート可能にドロップされると、ソート可能updateイベントがトリガーされます。1 つの解決策は、そのイベントをリッスンし、ドロップされたアイテムをブロックに変換することです。

$('.items div').draggable({
    helper: function(e) {
        return $('<div>').addClass('block').text( $(e.target).text() );
    },
    connectToSortable: ".content"
});

$('.content').sortable({
    update: function (event, ui) {
        ui.item.addClass('block');
    }
});​

実際のデモ: http://jsfiddle.net/DaXuT/1/

于 2012-09-27T19:21:30.683 に答える