Question

我有一个.drag div，当我把这个div放在.drop div中时，.drag div被删除了。

但是如果用户在对话框消息中单击“确定”，我只想删除.drag div。我试图在drop:function(event,ui){...}中执行此操作，但它无效。

你知道如何解决这个问题吗？

我这里有一个我正在研究的例子：http://jsfiddle.net/8t9v5tpq/12/

$(".drag").draggable({
  revert: 'invalid',
  drag: function(event, ui) {      
  }    
});

$('.drop').droppable({ 
 });

drop: function(event, ui) {
    $("#dialog").dialog({
      autoOpen: false,
      modal: true,
      buttons : {
        "Confirm" : function() {
          alert("You have confirmed!");
           ui.draggable.remove();
        },
        "Cancel" : function() {
          $(this).dialog("close");
          // revert the element to original position
        }
      }
      e.preventDefault();
      $("#dialog").dialog("open");
    }

Answer 1

此解决方案使用本机确认对话框：

$(".drag").draggable({
    revert: 'invalid',
    drag: function(event, ui) {

    }

});

$('.drop').droppable({
    tolerance: "pointer",
    accept: ".drag",
    drop: function(event, ui) {
        if (!confirm("Are you sure?"))

            ui.draggable.css({
            top: 0,
            left: 0
        });
    }
});

live example

在确认对话框消息后立即删除可拖动的div

1 个答案: