Question

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

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

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

<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 Draggable Droppable传递ID到Ajax

1 个答案: