javascript - 在确认对话框消息后放置可拖动的 div

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

此解决方案使用 native 确认对话框:

$(".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