jQuery 可拖放的通行证 ID 到 Ajax

Question

我正在尝试使用 jquery draggable/droppable 允许我将项目拖到某个位置并让它通过 [=25= 传递项目的 ID 和位置的 ID ] 到 php 文件。

总而言之，如果我有 10 个项目和 2 个拖动位置，我希望如果我拖动一个项目，它会 return 类似于 item7 和 location2。

希望这是有道理的，这是我目前所拥有的，非常基本，但这只是 return 项目值，显然是因为我认为位置变量不可用（我试图修复但未成功） .

<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，一旦我可以检索这两个值，以便我可以在数据库中使用它。

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

jQuery 可拖放的通行证 ID 到 Ajax

jQuery Draggable Droppable Pass IDs to Ajax

ajax

jquery

droppable

draggable