Comment passer une variable à partir de jQuery déplaçable à droppable

Je suis en train d'utiliser jQuery déplaçable/drop pour faire glisser un élément de la liste à une div, sur laquelle l'élément de la liste sera supprimé de la déplaçable ul et un appel ajax sera faite pour supprimer l'élément correspondant dans la base de données MySQL.

Le code HTML:

<ul id="draggable">
 <li id="list_1">List item 1</li> //Incrementing ID nos. from database
 <li id="list_2">List item 2</li>
 <li id="list_3">List item 3</li>
</ul>

<div id="droppable"></div>

Le jQuery jusqu'à présent:

$('#draggable li').draggable({
 drag: function(event, ui) {
  var id = $(this).attr('id').split("_");
  id = id[1];    //OK so far - but how to pass this to droppable?
  }
});

$('#droppable').droppable({
 drop: function(event, ui) {
  //How to get the id from draggable here so the correct list item is acted on?
  $('#draggable li').remove();
  $.ajax({ 
   url: "delete.php",
   type: "GET",
   data: {
    'id': id,
    'user_id': user_id  //user_id comes from PHP
  }, //end ajax        }
});

Mise à JOUR

Merci beaucoup pour les réponses. Je l'ai eu à travailler à l'aide de:

<script>
 var user_id = "<?php print($user_id); ?>";

 $(document).ready(function() {

    $('#draggable li').draggable({
      helper: 'clone'
    });

    $('#droppable').droppable({
      accept: '#draggable li', 
       drop: function(ev, ui) {
         var id = $(ui.draggable).attr('id').split("_");
         var movie_id = id[1];
         $('#draggable li#list_' + id).remove();

         $.ajax({ //begin add ajax
            url: "delete.php",
            type: "GET",
            data: { //begin add data
              'id': id,
               'user_id': user_id
            } //end data
         }); //end ajax

       } //end drop function
    }); //end droppable
 }); //end ready

</script>

Il seeems OK pour moi - il des problèmes avec ce que l'on peut voir?

  • Juste que vous n'êtes pas en attente d'une réponse de votre serveur dans votre requête ajax, mais le Drag & Drop semble des travaux ! Vous pourriez probablement gérer la suppression de plus facile que d', sélectionnez de nouveau le code HTML de l'élément DOM, mais de toute façon, il fonctionne.
InformationsquelleAutor westernKid | 2013-04-15
  1. 11

    Vous pouvez accéder à l'élément traîné à l'aide de l'aide de ui.draggable.attr('id') à l'intérieur de votre drop.

    Violon

    Voir La Documentation

    InformationsquelleAutor PSL
  2. 2

    Vous ne devriez pas gérer quoi que ce soit dans votre "glisser" de rappel pour plusieurs raisons:

    • Parce que c'est déclenché à chaque "mouvement" de l'événement, vous mettez à jour votre "id" var dans un inutile façon
    • Parce que vous pouvez accéder à votre élément dans la "goutte" de rappel facilement

    Regarder la mise à jour de JSFiddle:
    http://jsfiddle.net/nVx7a/23/

    HTML:

    <ul id="draggable">
    <li id="list_1" data-id='1'>List item 1</li>
    <li id="list_2" data-id='2'>List item 2</li>
    <li id="list_3" data-id='3'>List item 3</li>
</ul>
<div id="droppable"></div>

    Et JS:

    $(document).ready(function () {
    $('#draggable li').draggable();

    $('#droppable').droppable({
        drop: function(event, ui) {
            var $element = $(event.toElement), //equivalent to $(ui.helper);
                id = $element.data('id'), //HTML5 way, equivalent to $element.attr('data-id');
                //id = $(this).attr('id').split("_"); //HTML4 way
                $YOUR_PHP_VAR = 1;

            console.log($element, id, $YOUR_PHP_VAR);
            //Lock the UI, display a loader or something...

            $.ajax({ 
                url: "delete.php",
                type: "GET",
                data: {
                    'id': id,
                    'user_id': $YOUR_PHP_VAR  //user_id comes from PHP
                }
            }).done(function (response) {
                console.log('success', response);
                //Once your Database request is successfully executed, remove the element from your UI.
                $element.remove();
            }).fail(function (response) {
                console.log('fail', response);
            });
        }
    });
});
    InformationsquelleAutor Flo Schild
  3. 1

    Essayez ceci:- http://jsfiddle.net/adiioo7/vLUVa/1/

    JS:-

    $('#draggable li').draggable({
    drag: function (event, ui) {
    }
});

var user_id="temp";

$('#droppable').droppable({
    drop: function (event, ui) {
        //How to get the id from draggable here so the correct list item is acted on?
        $('#draggable li').remove();
        var id=$(ui.helper).attr("id").split("_");
        id=id[1];
        $.ajax({
            url: "delete.php",
            type: "GET",
            data: {
                'id': id,
                    'user_id': user_id //user_id comes from PHP
            } //end ajax        }
        });
    }
});

    HTML:-

    <ul id="draggable">
    <li id="list_1">List item 1</li>
    <li id="list_2">List item 2</li>
    <li id="list_3">List item 3</li>
</ul>
<div id="droppable" style="height:300px;width:300px;background:green;"></div>
    InformationsquelleAutor Aditya Singh