web-dev-qa-db-fra.com

jquery ui obtient l'identifiant de l'élément largable, lors de la suppression d'un élément

Comment obtenir l'identifiant de l'élément largable, lors de la chute d'un élément? 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 de la première colonne 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>
jquery-uidrag-and-drop
44
user685254

Pour obtenir l'id des éléments déplaçables et largables, 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 pourrait être un peu tard pour vous, mais je viens de commencer à utiliser jquery et j'avais besoin de la chose exacte.

99
Andy

jQuery UI's Droppable API manual mentionne comment obtenir le "drop-on-droppable" très "secrètement" dans la section de greedy option :

event.target Peut être vérifié pour voir quel droppable a reçu l'élément draggable

Mais notez que event.target Contient juste un élément DOM ...

Répondez à votre question

Vous pourrez obtenir l'ID dans le rappel de votre droppabledrop via le premier paramètre event.

Pure JS

Propriété: event.target.id - si l'ID n'est pas défini: chaîne vide ""
Attribut: event.target.getAttribute('id') - si l'ID n'est pas défini: null

jQuery

Propriété: $(event.target).prop('id') - si l'ID n'est pas défini: chaîne vide ""
Attribut: $(event.target).attr('id') - si l'ID n'est pas défini: non défini

Utilisation exemple

<script>
$(function(){
    $(".droppablesSelector").droppable({
        drop: function (event, ui) {                                      
          //display the ID in the console log:
          console.log( event.target.id );
        }
    });
});
</script>

Information additionnelle

Événement
Le système d'événements de jQuery normalise l'objet événement selon les normes W3C.
L'objet événement est garanti d'être transmis au gestionnaire d'événements (aucune vérification de window.event requise). Il normalise la cible , relatedTarget, qui, les propriétés metaKey et pageX/Y et fournit à la fois les méthodes stopPropagation () et preventDefault ().

8
jave.web

Vous connectez un "drop" événement 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) { ... }
});

Jetez un oeil à la documentation.

1
The_Butcher