javascript - リストアイテムコンテナを変更するときにアイテム属性を変更する

Question

私は2つのソート可能な接続されたリスト項目を持っており、リストコンテナを変更するときに項目の属性を変更したい(つまり、最初のリスト項目から2番目のリスト項目に項目をドラッグアンドドロップすることを意味します)。ここに私のコードがあります:

$(".column").sortable({
    connectWith:    $(".column") ,  
    placeholder:    'widget-placeholder',   
    cursor: 'move' ,
    helper: function (evt, ui) {
        return $(ui).clone().appendTo('body').show();
    },  
    dropOnEmpty: true,  
    zIndex: 10
});

$("#column2").droppable({
    out: function( event, ui ) {
        $(ui.item).attr("rel",'0');
    },
    over: function( event, ui ) {
        $(ui.item).attr("rel",'1');
    }
  });

Answer 1

良いスタートを切ることができましたが、修正が必要な点がいくつかあり、気付いていない可能性がある問題がいくつかあります。

1. アイテムは次のように構成されます。

   <li id="1" class="item">
        <h3 rel="1">item1</h3>
   </li>
   

   relそのため、要素にを設定する必要がありh3ますが、jsFiddle のコードは次のとおりです。

   $("#column2").droppable({
     drop: function( event, ui ) {
       $(this).find('.item').attr("rel",'0');
     }
   });
   

   したがって、これは、すべての要素に対応する$(this)クラスを持つすべての要素 (つまり、ドロップ可能要素) を検索しています。以下を使用する必要があります。itemli

   ui.item.find("h3").attr("rel", "0");
   

2. あなたの jsFiddle のソート可能は次のとおりです。

   $(".column").sortable({
       connectWith:    $(".column") ,  
       placeholder:    'widget-placeholder',   
       cursor: 'move' ,
       //  utiliser helper-clone pour que le sortable n'est donc pas contenue par un volet 
       helper: function (evt, ui) {
           return $(ui).clone().appendTo('body').show();
       },  
       dropOnEmpty: true,  
       zIndex: 10
   });
   

   ヘルパー関数は必要ありません。そのまま使用できますhelper: "clone"。forcePlaceholderSize: trueドロッパブルがドロップされる場所を示す際にユーザーに有用なフィードバックを提供するため、ソリューションに追加しました。順序付けが重要でない場合は、削除できます。

3. droppable.dropandの使用には問題がありますdroppable.out- リストの最初または最後にドロップされたドロップ可能オブジェクトのイベントをキャプチャしません (これは、イベントをトリガーするためにドロップ可能オブジェクトをリストに*ドロップする必要があるためだと思います。リストの最初/最後にドロップすると、事実上新しい位置になり、リスト内にはありません)。
   したがって、sortable代わりに次を使用できます。

   $(".column").sortable({
       connectWith: $(".column"),
       placeholder: "widget-placeholder",
       forcePlaceholderSize: true,
       cursor: "move",
       helper: "clone",
       dropOnEmpty: true,
       zIndex: 10
   });
   
   $("#column2").on("sortreceive", function (event, ui) {
       ui.item.find("h3").attr("rel", "0");
   });
   
   $("#column2").on("sortremove", function (event, ui) {
       ui.item.find("h3").attr("rel", "1");
   });
   

実用的なソリューションについては、私のjsFiddleを参照してください。