jQuery Draggable Droppable Pass IDs 到 Ajax答案

【问题标题】：jQuery Draggable Droppable Pass IDs to AjaxjQuery Draggable Droppable Pass IDs 到 Ajax
【发布时间】：2015-06-23 02:02:00
【问题描述】：

我正在尝试使用 jquery draggable/droppable 来允许我将一个项目拖到一个位置并让它通过 ajax 将项目的 id 和位置的 id 传递给一个 php 文件。

总之，如果我有 10 个项目和 2 个拖动位置，我希望如果我拖动一个项目，它会返回类似于 item7 和 location2 的内容。

希望这是有道理的，这是我目前所拥有的，非常基本，但这只返回项目值，显然是因为我认为 location 变量不可用（我试图修复失败）。

<script>
  $(function() {
   var location;
$("#draggable" ).draggable({
     revert: "valid",
     drag: function (event, ui) {
         var location = $(this).attr("id");
     }
    });
$(".droppable" ).droppable({
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    drop: function( event, ui ) {
    var item = $(this).attr("id");

        $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
            alert(item + location);
    }
});

});

提醒一下，如果可能的话，一旦我可以检索这两个值，我想在其中添加 ajax，以便我可以在数据库中使用它。

【问题讨论】：

AJAX 表示对服务器的请求 + 来自服务器的响应。它是通过 HTTP 完成的。您可以将所需的任何数据附加到请求中，并且可以按照您需要的方式操作响应。既然你用的是jQuery，答案就在这里：api.jquery.com/jquery.ajax
谢谢，这太棒了，但我无法同时填充这两个变量，所以即使我找出了 ajax 部分，我也只会传递一半的答案......关于获取 var 位置的任何帮助与当前工作的 var item 变量一起传递给 droppable 函数？？
我不是专家，但我觉得在 draggable 的回调中调用 droppable 会起作用（当然在 droppable drop 中触发 ajax 调用）。我按照这个 OP 看看是否有更好的方法。

标签： jquery ajax draggable droppable

【解决方案1】：

我想通了，还没有测试它的 ajax 部分，但主要目标是检索与它一起工作的两个变量

<script>
$(".draggable" ).draggable({
     revert: "valid",
     drag: function (event, ui) {   
     }
}); 
$(".droppable").droppable({
    drop: function(e, ui) {
        // This gets the ID of the item you are dragging
        var item_id = $(ui.draggable).attr('id');
        var location = $(this).attr("id");
        $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
            alert(item_id + location);
        // Ajax call
        $.ajax({
            type: "GET",
            timeout: 10000,
            url: "item_update.php?item_id="+item_id+"&location="+location,
        });
    }
});
</script>

【讨论】：