jquery ui récupère l'identifiant de l'élément droppable, lorsqu'un élément est déposé

Question

Comment obtenons-nous l'identifiant d'élément droppable, lorsqu'un objet est déposé? Ici, j'utilise jquery ui et asp.net mvc.

  <table id="droppable">
    <tr>
    <td style="width:300px;height:50px">Backlog</td>
    <td style="width:300px;height:50px">Ready</td>
    <td style="width:300px;height:50px">Working</td>
    <td style="width:300px;height:50px">Complete</td>
    <td style="width:300px;height:50px">Archive</td>
    </tr>
        <tr id="cart">
        <td id="BackLog" class="drag"  style="width:120px;height:50px;">

         <img class="draggable" id="1234" src="../../Content/themes/base/images/ui-icons_222222_256x240.png" />

        </td>
            <td id="Ready"  class="drag"  style="width:140px;height:50px">


            </td>
            <td id="Working" class="drag"  style="width:140px;height:50px">

            </td>
            <td id="Complete" class="drag" style="width:140px;height:50px">


            </td>
            <td id="Archive" class="drag" style="width:140px;height:50px">

            </td>
        </tr>
    }
   </table> 
 

Ici, je veux déplacer l'image dans la colonne Ist vers une autre colonne et obtenir l'identifiant de cette colonne. Pour le glisser-déposer, j'utilise le script

 <script type="text/javascript">
    $(function () {
        $(".draggable").draggable({ containment: '#imageboundary', axis: "x" });
        $("#droppable").droppable({
            drop: function (event, ui) {                                      
                $.ajax({
                    type: "POST",
                    url: '/Project/AddToPhase/' + $(ui.draggable).attr("id") ,
                    success: function (data) {
                        $('.result').html(data);
                    }
                });
            }
        });
    });
</script>
 

Answer 1

Pour obtenir l'identifiant des éléments glissables et droppables, utilisez ce qui suit:

 $('.selector').droppable({ drop: Drop });

function Drop(event, ui) {
  var draggableId = ui.draggable.attr("id");
  var droppableId = $(this).attr("id");
}
 

Désolé, il se peut que je sois un peu en retard, mais je viens de commencer à utiliser jquery et j’avais besoin de ce que je voulais.

Answer 2

Vous connectez un événement "drop" et interrogez l'élément que vous venez de supprimer. L'élément étant le paramètre "ui" dans la fonction ci-dessous

 $( ".selector" ).droppable({
   drop: function(event, ui) { ... }
});
 

Regardez la documentation.