还原拖拽位置

Question

我在我的代码中使用拖拽和拖拽jquery ui。代码工作正常。但用户应该有一些保存后编辑数据的能力。这意味着我需要在用户再次打开页面时恢复拖动和拖动位置。我尝试使用触发器，但我无法模拟“drop ui”我该怎么做？

$(".draggable-children-username").draggable({ 
    snap: ".draggable-in-box", 
    opacity: 0.7, 
    revert: 'invalid', 
    helper: "clone" 
}); 
$(".draggable-in-box").droppable({ 
    accept: $(".draggable-children-username"), 
    hoverClass: "dropHover", 
    drop: function (ev, ui) { 
     $(this).trigger("DopeEvent", ui); 
    } 
}); 

$(".draggable-in-box").bind("DopeEvent", function(event, ui){ 
    console.log(ui); 

    var me = ui.draggable.clone() 
    ui.draggable.draggable("disable") 
    me.appendTo(this) 
    .addClass("newClass"); 
    me.draggable({ 
     accept: ".draggable-in-box", 
     revert: function(valid) { 
      if(!valid) { 
       this.remove(); 
       $(".dr-children-id-"+this.attr("data-id")).draggable("enable"); 
      } 
     } 
    }); 
}); 

$(".draggable-in-box").trigger("DopeEvent", $(".dr-children-id-140")); 

当前错误：未捕获的类型错误：ui.draggable.clone不是一个函数

http://jsfiddle.net/vjGY4/123/

Answer 1

一些修正。工作实例的什么，我认为你正在试图做的：

http://jsfiddle.net/Twisty/vjGY4/125/

JQuery的

$(".draggable-children-username").draggable({ 
    snap: ".draggable-in-box", 
    opacity: 0.7, 
    revert: 'invalid', 
    helper: "clone" 
}); 

$(".draggable-in-box").droppable({ 
    accept: $(".draggable-children-username"), 
    hoverClass: "dropHover", 
    drop: function(ev, ui) { 
    $(this).trigger("DopeEvent", ui.draggable); 
    } 
}); 

$(".draggable-in-box").bind("DopeEvent", function(event, ui) { 
    console.log(ui); 

    var me = $(ui).clone(); 
    //ui.draggable.draggable("disable") 
    me.appendTo(this) 
    .addClass("newClass"); 
    me.draggable({ 
    accept: ".draggable-in-box", 
    revert: function(valid) { 
     if (!valid) { 
     this.remove(); 
     $(".dr-children-id-" + this.attr("data-id")).draggable("enable"); 
     } 
    } 
    }); 
}); 

$(".draggable-in-box").trigger("DopeEvent", $(".dr-children-id-140")); 

1. 不要假设你正在传递一个拖动对象或一个jQuery对象你DopeEvent。使用var me = $(ui).clone();
2. 在你drop，你需要传递的元素，像这样：$(this).trigger("DopeEvent", ui.draggable);

希望有所帮助。您可以通过检查传递的内容来改善事件。像if(typeof ui === "object"){}可以工作。