1

私はこのコードを持っています:

<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Song Description 1</li>
<li class="ui-state-default">Song Description 2</li>
</ul>

<ul id="sortable2" class="connectedSortable">
<li class="ui-state-default">Song Description 3</li>
<li class="ui-state-default">Song Description 4</li>
</ul>

私がする必要があるのは、ドラッグ アンド ドロップ (例: 曲の説明 1#sortable1を の位置に#sortable2) してアラートを出すことです (例: の曲 1#sortable1が にドロップされた#sortable2) 。

それは可能ですか？「li」に ID を追加する必要がありますか?

大変助かりました。

4

1 に答える 1

6

ソート可能な項目に追加idする必要はありません。jQueryUI は、特定のイベントが発生したときにフックできるコールバック関数 ( http://jqueryui.com/demos/sortable/のイベントを参照) を提供します。以下の例では、メッセージを作成するために必要なすべてを含むイベントおよびuiオブジェクト パラメータが渡されるreceiveコールバックを使用しています。

JavaScript

​$('#sortable1, #sortable2').sortable({
    connectWith: '.connectedSortable',
    receive: function(event, ui) {
        console.log(ui.item.html() + ' from #' + ui.sender.context.id + ' was dropped in #' + this.id);
    }
});​

jsFiddleでデモも作成しました

于 2012-08-31T12:42:50.853 に答える