jquery - 如何将变量从 jQuery Draggable 传递到 Droppable

Question

我正在尝试使用 jQuery Draggable/droppable 将列表项拖动到 div，此时列表项将从可拖动的 ul 中删除，并且将进行 ajax 调用来删除 MySQL 数据库中的相应项目。

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>

到目前为止的 jQuery:

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

更新

非常感谢您的回复。我使用以下方法让它工作:

<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>

我觉得没问题 - 你看到的有什么问题吗？

Answer 1

您可以在放置函数中使用 ui.draggable.attr('id') 来访问拖动的元素。

Fiddle

See Documentation