Sürükle ve bırakma konumlarını geri yükleyin

Question

Kodumda sürükle ve bırakma jquery ui kullanıyorum. Ve kod iyi çalışıyor. Ancak, kullanıcı kaydettikten sonra verileri düzenleme konusunda bazı yeteneklere sahip olmalıdır. Bu, kullanıcı sayfayı tekrar açtığında sürükle ve bırak pozisyonlarını geri yüklemem gerektiği anlamına geliyor. Tetik kullanmayı deniyorum ama "drop ui" taklit edemiyorum. Bunu nasıl yapabilirim?

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

Güncel hata: Yakalanmayan TypeError: ui.draggable.clone

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

Answer 1

Birkaç düzeltmeleri bir işlev değil. Ne yapmaya çalışıyorsun ne düşündüğünü örnek çalışma:

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. bir sürüklenebilir nesne veya bir jquery nesne geçirilen ediliyoruz düşünmeyin DopeEvent. senin drop yılında
2. var me = $(ui).clone(); kullanın, bunu böyle elemanı geçmesi gerekiyor: yardımcı $(this).trigger("DopeEvent", ui.draggable);

Umut. Nelerin geçtiğini kontrol ederek etkinliğinizi geliştirebilirsiniz. if(typeof ui === "object"){} gibi bir şey işe yarayabilir.