Question

我有一个图像元素，我希望能够拖动到可放置区域，并激活ajax post请求，但如果失败，则draggable元素应该恢复到它的位置。

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

然而，由于我是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的draggable中使用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
    });
}

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

Answer 2

在drop中写下以下代码

    if (!ui.draggable.data("originalPosition")) //fix the original position 
                        {

                            ui.draggable.data("originalPosition",
                            ui.draggable.data("uiDraggable").originalPosition);

                        }

并在任何地方编写以下函数并调用else中的任何函数

 function revertsingle($selector) {
    position = $selector.data("originalPosition");
    if (position) {
        $selector.animate({
            left: position.left,
            top: position.top
        }, 500, function() {
            $selector.data("originalPosition", null);
        });
    }

 }

并将选择器传递给该函数

   revertsingle($("#id"));

多数民众赞成......

Answer 3

您可以在drop回调中使用this关键字来引用要删除项目的dropable。

对于还原，您可以在revert回调中使用标记，如下所示：

$(function () {

    var failure = true; // this will be used to indicate whether to revert or not

    $(".drag").draggable({
      start: function(e,ui){
        failure = true; // reset the flag
      },
      revert: function () {
        return failure;
      }
    });

    $(".drop").droppable({
      accept: ".drag",
      drop: function (event, ui) {
        var imageId = ui.draggable.attr("id");
        var targetLocation = $(this); // this will refer to the droppable
        var formdata = {
            id: imageId
        };
        url: uploadURL,
        type: "POST",
        contentType: false,
        processData: false,
        cache: false,
        data: formData,
        success: function (data, ui) {
            status = $.parseJSON(data);
            if (status['status'] == 'success') {
                $(ui.draggable).hide("slow");
                failure = false;
            }
            // if the condition is not met, revert will return true,and item will be reverted
        }
     }
    });

});

旁注：为了使其正常工作，我们必须使ajax请求同步（不是最好的方法，但是在测试时它会做到工作）

如何在失败的ajax post请求中恢复draggable元素

3 个答案: