jQuery Droppable - un élément par cible dynamiquement

Question

J'essaie d'obtenir dragItem_1 pour être seulement accepté par target_1 et ainsi de suite.

Je voudrais changer dynamiquement le paramètre accept à tout être traînés le id de l'article est.

Je peux le faire fonctionner en définissant chaque élément draggable et droppable, mais puisque la quantité d'éléments et de cibles est générée par l'utilisateur, je dois le faire dynamiquement.

$(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"); 
    } 
    }); 
}); 

J'ai aussi essayé d'obtenir l'ID de l'événement start mais je reçois un non défini.

Answer 1

Espérons que je vous ai bien compris, donc en supposant que vous vouliez des zones de dépôt ciblées, alors il suffit de faire correspondre les valeurs/attributs et d'annuler la requête si elle est fausse. Maintenant, mon approche change considérablement ce que vous avez. J'ai opté pour Sortable

MVC/HTML

@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

C'est une tentative assez grossière, mais l'application d'un identifiant unique et la comparaison sur la réception, vous pouvez annuler la baisse.

$(".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

Il n'est pas clair sur ce que vous voulez accomplir. Cela dit, il existe un moyen de mettre à jour l'option accept d'une droppable lorsque vous commencez à faire glisser un élément.

Je vais vous montrer deux méthodes qui fonctionnent.

D'abord, les éléments de dépôt initiaux. Ensuite, faites glisser les éléments. Cela garantit que nous pouvons mettre à jour les options de suppression lorsque nous commençons notre glisser.

$(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); 
    } 
    }); 
}); 

Exemple de travail: https://jsfiddle.net/Twisty/agypswbj/6/

Certaines choses à noter, les utilisations draggable ui.helper, non ui.draggable. Les ui.helper et ui.draggable sont des objets jQuery et ne doivent pas être encapsulés avec $(). Deuxièmement, nous pouvons utiliser notre option de rappel accept dans droppable.

$(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" 
    }); 
}); 

Exemple de travail: https://jsfiddle.net/Twisty/agypswbj/5/

espoir qui aide.