jQuery Droppable - ターゲットごとに動的に1つのアイテム

Question

dragItem_1をtarget_1のように受け入れるようにしようとしています。

私は動的に項目のidがあるドラッグされているものは何でもにacceptパラメータを変更したいと思います。

各ドラッグ可能なアイテムとドロップ可能なアイテムを定義することで動作させることができますが、アイテムとターゲットの量がユーザによって生成されるため、動的に行う必要があります。

$(function() { 
    $(".js-draggable-box").draggable({ 
    revert: "invalid", 
    start: function(event, ui) { 
     var item = ui.draggable; 
     var id = $(item).attr('id'); 
     console.log(id) 
    } 
    }); 

    $(".js-drop-target").droppable({ 
    accept: ".js-draggable-box", 
    drop: function(event, ui) { 
     var dropped = ui.draggable; 
     var droppedOn = $(this); 
     $(this).addClass("c-drop-target--correct").droppable("disable"); 
     $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn).draggable("disable"); 
    } 
    }); 
}); 

私もstartイベントにIDを取得しようとしましたが、私は未定義を取得します。

Answer 1

うまくいけば私はあなたを正しく理解しているはずです。したがって、目標とするドロップゾーンが必要だったと仮定すると、単純に値/属性を一致させ、falseの場合は要求を無効にします。

私のアプローチは、あなたが持っているものを大きく変えます。私は

@foreach (var item in Model.Items) 
    { 
     <div class="js-drag-container drag-container" data-item-id="@item.Id"> 
     <h3 class="ui-state-disabled"> 
      Item @item.Name <i class="fa fa-info-circle info-circle-icon" aria-hidden="true" data-make="@item.Make" data-model="@item.model" data-serial="@item.SerialNumber"></i> 
           <span>@item.something</span> 
           <span>@item.something</span> 
     </h3> 

     @foreach (var i in item.alias) 
     { 
      <div class="alias-item btn-red" data-item-id="@item.Id"> 
       <p class="alias">@i.Alias</p> 
      </div> 
      } 
     </div> 
    } 

JS

それはむしろ、粗試みだが、一意のIDを適用し、上の比較は、あなたがドロップをキャンセルすることができ受けるSortable

MVC/HTMLを選択しました。

$(".js-drag-container").sortable({ 
    connectWith: ".js-drag-container", 
    delay: 15, 
    revert: true, 
    dropOnEmpty: true, 
    scroll: false, 
    cursor: "move", 
    items: "> div:not(.ui-state-disabled)", 
    start: function (event, ui) { 
    }, 
    stop: function (event, ui) { 
    }, 
    receive: function (event, ui) { 

     //Item being moved. 
     var childId = ui.item.attr('data-item-id'); 
     //parentId of the col being dropped into 
     var parentId = ui.item.parent().attr('data-item-id'); 

     if (childId != parentId) 
     { 
      //Cancel drop 
      $(ui.sender).sortable('cancel'); 

      console.log("Drop Cancelled") 
     } 

    } 

Answer 2

達成したいことは不明です。つまり、アイテムをドラッグし始めるときに、ドロップ可能なオプションのacceptを更新する方法があります。

2つの方法があります。

最初に、最初のドロップ項目。その後、アイテムをドラッグします。これにより、ドラッグを開始するときにドロップオプションを更新できるようになります。

$(function() { 
    $(".drop_items .box").droppable({ 
    accept: ".none", 
    drop: function(event, ui) { 
     var dropped = ui.draggable; 
     var droppedOn = $(this); 
     $(this).addClass("c-drop-target--correct").droppable("disable"); 
     dropped.detach().css({ 
     top: 0, 
     left: 0 
     }).appendTo(droppedOn).draggable("disable"); 
    } 
    }); 

    $(".drag_items .box").draggable({ 
    revert: "invalid", 
    start: function(e, ui) { 
     var item = ui.helper.attr("id") 
     var target = "#dropTarget_" + item.slice(-1); 
     console.log("Setting 'accept' for " + target + " to '#" + item + "'"); 
     $(target).droppable("option", "accept", "#" + item); 
    } 
    }); 
}); 

の作業例：https://jsfiddle.net/Twisty/agypswbj/6/

いくつかの点に注意する、ドラッグの使用ui.helper、ないui.draggable。 ui.helperとui.draggableはjQueryオブジェクトであり、$()でラップする必要はありません。

第2に、acceptコールバックオプションを使用できます。

$(function() { 
    $(".drop_items .box").droppable({ 
    accept: function(item) { 
     var target = $(this); 
     var targetNumber = target.attr("id").slice(-1); 
     var itemNumber = item.attr("id").slice(-1); 
     return targetNumber === itemNumber; 
    }, 
    drop: function(event, ui) { 
     var dropped = ui.draggable; 
     var droppedOn = $(this); 
     $(this).addClass("c-drop-target--correct").droppable("disable"); 
     dropped.detach().css({ 
     top: 0, 
     left: 0 
     }).appendTo(droppedOn).draggable("disable"); 
    } 
    }); 

    $(".drag_items .box").draggable({ 
    revert: "invalid" 
    }); 
}); 

実施例：https://jsfiddle.net/Twisty/agypswbj/5/

希望に役立ちます。