Drag & Drop Positionen wiederherstellen

Question

Ich benutze Drag & Drop jquery ui in meinem Code. Und der Code funktioniert gut. Der Benutzer sollte jedoch die Möglichkeit haben, Daten nach dem Speichern zu bearbeiten. Das bedeutet, dass ich Drag & Drop-Positionen wiederherstellen muss, wenn der Benutzer die Seite erneut öffnet. Ich versuche Trigger zu verwenden, aber ich kann nicht "Drop ui" emulieren. Wie kann ich das tun?

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

Aktuelle Fehler: Uncaught Typeerror: ui.draggable.clone ist keine Funktion

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

Answer 1

Einige Korrekturen. Arbeitsbeispiel von dem, was ich denke, Sie versuchen zu tun: Sie

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. Gehen Sie nicht davon ein verschiebbares Objekt oder ein Jquery-Objekt übergeben wird, in Sie DopeEvent. Verwenden Sie var me = $(ui).clone();
2. In Ihrem drop, müssen Sie das Element passieren etwa so: $(this).trigger("DopeEvent", ui.draggable);

Hoffnung, das hilft. Sie können Ihre Veranstaltung verbessern, indem Sie überprüfen, was passiert ist. Etwas wie if(typeof ui === "object"){} könnte funktionieren.