0

Jquery UI ドラッグ ドロップ ソート可能を使用するリストがありますが、オプションの 1 つをリストにドロップすると、次のようにリスト内のどこにあるかを確認できるようにしたいと考えています。

http://www.webresourcesdepot.com/dynamic-dragon-drop-with-jquery-and-php/

唯一のことは、現在のJqueryでこれを行う方法がわからないことです。試してみると失敗し、[オブジェクト] [オブジェクト]エラーが発生し続けました:)

これが私のコードです：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js" type="text/javascript"></script>
    <script src="js/jquery.ui.core.js"></script>
    <script src="js/jquery.ui.widget.js"></script>
    <script src="js/jquery.ui.mouse.js"></script>
    <script src="js/jquery.ui.sortable.js"></script>
<script type="text/javascript>
$( "#example1, #example2" ).sortable({
stop: function(event, ui) { 
var item = $(ui.item).parent().attr("id"); 
var moveid = $(ui.item).attr("id");
var sortableid = $(ui.item).sortable;
alert(item);
alert(moveid);
}}).disableSelection();
    });
</script>


<div class="box">
<ul id="example1" class='droptrue'>
<li id="id1" class="ui-state-default boxclass">ABC</li>
</ul>
</div>

<div class="box">
<ul id="example2" class='droptrue'>
<li id="id2" class="ui-state-default boxclass">XYZ</li>
</ul>
</div>

javascriptまたはjqueryを使用してこれを行う方法の正しい方向を教えてくれる人がいれば、本当に感謝しています.

前もって感謝します！

4

1 に答える 1

1

リスト項目に「list_item」のクラスがあると仮定しましょう。

HTML ->

<ul>
   <li class="list_item" id="some_unique_identifier1"> List Item 197 </li>
   <li class="list_item" id="some_unique_identifier2"> List Item 3 </li>
   <li class="list_item" id="some_unique_identifier3"> List Item 55 </li>
   <li class="list_item" id="some_unique_identifier4"> List Item 104 </li>
   ...etc
</ul>

jQuery ソート可能 ->

$(function(){
  $('ul').sortable({
    stop: function(event, ui){
      var list_item_id = $(ui.item).prop('id');
      var list_item_position =$(ui.item).parent().children().index(ui.item);

      $.ajax({
        type: 'POST',
        url: '/path/to/my/controller.ext',
        data: { 'id' : list_item_id, 'list_position' : list_item_position}
      });
    }
  }).disableSelection();
});

PHP コントローラーは、最も難しい部分です。移動した行を (明らかに) 更新する必要があります。また、その行の後にある他のすべての行を +1 で更新する必要があります。これは、リスト内ですべてのインデックス位置が 1 つ増えるためです。ここから適切なワークフローを作成するのはあなた次第ですが、jQuery Sortable の観点から必要なものの要点はあなたにあります。

補足として

正直なところ、作業中のテーブルを更新するために大量の $.ajax を送信することはおそらくないでしょう。すべての値を格納する一時テーブルを作成し、複数回送信されたアイテムを削除して、重複がないようにします。次に、ユーザーが送信ボタン (または所定の間隔) を使用して、ある時点で位置を保存するように要求します。次に、一時テーブルにある値で実際のテーブルを更新します。作業が完了したら、一時テーブルも削除します。

于 2012-08-09T02:35:07.197 に答える