如何将变量从 jQuery draggable 传递到 droppable

Posted 2023-05-08

【中文标题】如何将变量从 jQuery draggable 传递到 droppable

【英文标题】：How to pass a variable from jQuery draggable to droppable

【发布时间】：2013-04-07 22:26:29

【问题描述】：

我正在尝试使用 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>

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

【问题讨论】：

只是你没有在你的 ajax 请求中等待服务器的回答，但拖放似乎有效！与重新选择 HTML DOM 元素相比，您可能更容易管理删除，但无论如何，它可以工作。

【参考方案1】：

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

Fiddle

See Documentation

【参考方案2】：

出于多种原因，您不应在“拖动”回调中管理任何内容：

因为它是在每次“移动”事件时触发的，所以您正在以一种无用的方式更新您的“id”变量 因为您可以在“drop”回调中轻松访问您的元素

观看更新的 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>

还有 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);
            );
        
    );
);

【参考方案3】：

试试这个：- 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>