javascript - 如何在失败的ajax post请求上恢复可拖动元素

Question

我有一个图像元素，我希望能够将其拖动到可放置区域，并触发 ajax post 请求，但如果失败，可拖动元素应该恢复到原来的位置。

另外，我如何找到元素被放置在其中的可放置区域，我知道如何找到被放置的项目，但不知道它被放置的区域。

但是，由于我是 jquery 新手，我在使其工作时遇到问题。我现在的代码如下

$(function() {
    $(".drag").draggable( { revert:"invalid"} );
    $(".drop").droppable({
        accept: ".drag",
        drop: function( event, ui ) {
            var imageId = ui.draggable.attr("id");
            var targetLocation= 'something'; //no idea how to find zone dropped into
            var formdata={id:imageId};

       $.post( "<?php echo base_url('home/test'); ?>", { image_id: imageId })
      .done(function( data ) {
        var status = $.parseJSON(data);
        // console.log(status['status']);
        if (status['status']=='success') { 
            failure= false;
            $(ui.draggable).hide("slow");
         }
      },'json');          

        }

    });
  });

Answer 1

您可以在 jQuery 的可拖动中使用 start 和 stop 属性事件。类似于以下内容:

$(".drag").draggable ({
    start: function(event, ui){
        var top = ui.position.top;
        var left = ui.position.left;
        $(this).attr({"data-top": top, "data-left": left});
    }
});

上面将保存您刚刚移动到 DOM 的元素的起始位置。

在 AJAX 错误处理部分中，更改您所拥有的内容

}else{
     // revert the drag option
    $(".drag").draggable( { revert:"invalid"} );
};

到

}else{
    var top = $(ui.draggable[0]).attr("data-top");
    var left = $(ui.draggable[0]).attr("data-left");
    $(ui.draggable).css({
        top: top,
        left: left
    });
}

我们使用传递到与 drop 属性关联的函数中的 ui 参数来抓取 top 和 left 我们保存在 DOM 上的值。然后我们更改元素本身的 CSS top 和 left 值