0

私はjQueryUIのDraggableとDroppableのドキュメントを調べてきました。リストを別のリストにドラッグアンドドロップできるようにするさまざまな方法を見つけましたが、両方の方法はありませんか？

私のシナリオは、2つのリストがあるということです。

<div id='attached'>
  <ul>
    <li id='12'>An item</li>
    <li id='48'>An item</li>
    <li id='183'>An item</li>
  </ul>
</div>

<div id='non-attached'>
  <ul>
    <li id='36'>An item</li>
    <li id='873'>An item</li>
    <li id='1639'>An item</li>
  </ul>
</div>

リスト1からリスト2にアイテムをドロップする場合は、AJAXURLを実行する必要があります。

hello.asp?action=add&id=48

そして、リスト2からリスト1にアイテムをドロップした場合、別のAJAXURLを実行する必要があります-のように

hello.asp?action=remove&id=48

これはどうにか可能ですか？:)それは私のスクリプトのインターフェースをとても簡単にするでしょう:)

注：私はすでにjQueryUIに精通していますが、ドロップ可能とドラッグ可能の両方が私にとって新しいものです。今までは少なくとも:)

編集：

<ul id='attached'>
  <li id='itemID_12'>An item</li>
  <li id='itemID_48'>An item</li>
  <li id='itemID_183'>An item</li>
</ul>

<ul id='non-attached'>
  <li id='itemID_36'>An item</li>
  <li id='itemID_873'>An item</li>
  <li id='itemID_1639'>An item</li>
</ul>

$(function() {
  $('#attached').sortable({ dropOnEmpty: true, items: 'li:not(.ui-state-disabled)', cursor: 'pointer', update: function(event, ui) { }, connectWith: '#non-attached' }).disableSelection();
  $('#non-attached').sortable({ dropOnEmpty: true, items: 'li:not(.ui-state-disabled)', cursor: 'pointer', update: function(event, ui) { }, connectWith: '#attached' }).disableSelection();
};

今、私は更新を介してAJAXを介して正しいシリアル化されたデータを取得する必要があるだけです：{}？

編集：

とった！

var order = $('#attached').sortable('serialize',{key:'string'});
$.ajax({
  type: 'POST', 
  cache: false, 
  contentType: 'application/x-www-form-urlencoded; charset=UTF-8', 
  url: 'functions.asp?a=helloworld', 
  data: order 
});

これで、functions.aspでrequest.form（ "string"）を実行すると、 "25、28、31、94、95"のような一連のIDが取得されます。..:)

4

1 に答える 1

1

sortables を使用して同様のことを行いました (私のアプリでは順序が重要でした)、sortables はドラッグ可能なものに基づいています。現在、私たちのネットワークで jqueryui.com へのアクセスに問題が発生しているため、あなたが望むものを正確に提供することはできませんが、私のものに基づいたものを提供します。

$(function() {
    $("#attached").sortable({
        update: function(event, ui) {
            FunctionToCheckAddtionAndCallAjax();
        },
        connectWith: '#non-attached'
    });

    $("#non-attached").sortable({
        update: function(event, ui) {
            FunctionToCheckRemovalAndCallAjax();
        },
        connectWith: '#attached'
    });
});

これはドラッグ アンド ドロップ可能ではなくソート可能に基づいているため、チェックと ajax を無名関数ではなく関数呼び出しにプッシュしました。これらの関数は、更新が追加/削除であったか、単に並べ替えであったかを確認し、条件付きで作成する必要があります。あなたのajax呼び出し。アイテムが追加/削除されたときのイベント ハンドラーがあるかもしれませんが、サイトにアクセスしないとドキュメントを確認できません。

于 2011-10-05T10:51:15.950 に答える