Podczas klonowania obiektu przeciągalnego w jQuery UI, w jaki sposób można przenieść dane i zdarzenia do nowego elementu?

Question

Mam element dający się przeciągnąć z zestawem helper: 'clone', ale gdy klony elementu, żaden z data() lub zdarzeń nie są trwałe w nowym elemencie.

Próbowałem na kilka sposobów, aby ponownie podłączyć data(), ale nie mogę wybrać nowego elementu, jak również starego elementu w tej samej instrukcji.

Na przykład, można wybrać początkowy element Draggable stop() imprezy:

$blah.draggable({ 
    helper: 'clone', 
    stop: function(ev, ui) { 
     var oldData = $(ev.target).data('blah'); 
    } 
}); 

I mogę też dostać nowy element w droppable drop() imprezy:

$blah.droppable({ 
    drop : function(ev, ui) { 
     var $newElement = ui.draggable; 
    } 
}); 

ale mogę wymyślić sposób, aby uzyskać oba w tym samym wydarzeniu.

Co chciałbym zrobić to w jakiś sposób przesłać dane np:

$newElement.data('blah', $oldElement.data('blah')); 

lub w inny sposób dane trwałe, jak można z $blah.clone(true);

Answer 1

nie pracował zbyt intensywnie z podrzucane, ale czy nie mógłbyś po prostu zrobić czegoś takiego?

$(".draggable").draggable({ 
    helper: 'clone' 
}); 

$("#droppable").droppable({ 
    drop: function(ev, ui) { 
     $(this).append(ui.draggable.clone(true)); 
    } 
}); 

wydaje się działać, chyba, że ​​coś mi brakuje:

http://jsfiddle.net/hasrq/

Answer 2

Okazuje się, że problem był sortable, nie przeciągać/droppable (ja mocowania sortable później, ale pomyślałem, że nie był część problemu, więc zostawiłem to z pierwotnego pytania).

skończyło się używając rodzaju kombinacji użytkownika @ kingjiv rozwiązania powyżej, wraz z nie-do-największego włamania, ale przynajmniej wydaje się działać:

$blah.sortable({ 
    receive: function(ev, ui) { 
     // setting a global variable here 
     MyGlobals.cloneCache = ui.item.clone(true); 
    }, 
    stop: function(ev, ui) { 
     $(ui.item).replaceWith(MyGlobals.cloneCache); 
    } 
}); 

Chodzi o to, że po raz pierwszy klon oryginalną pozycję w zdarzeniu , przechowuj ją w pamięci podręcznej w zmiennej, a następnie zamień element na ten w zdarzeniu stop().

Trochę brzydka, ale przynajmniej działa.

Answer 3

Aby uzyskać dostęp do danych pierwotnego elementu w spadku można użyć ui.draggable.context. W poniższym przykładzie kontekst odnosi się do oryginalnego przeciągniętego elementu i masz dostęp do całej jego zawartości. "Przeciągnij" oznacza nowy element, który jest upuszczany.

$("#droppable").droppable({ 
    drop: function(ev, ui) {   
     console.log(ui); 
     console.log(ui.draggable.context); 
     console.log($(ui.draggable.context).data('pic')); 
    } 
}); 

Answer 4

ui.item odnosi się do przeciągniętego przedmiotu. Kiedy skopiowany element jest klonowany, nie ma wbudowanego sposobu dostępu do elementu docelowego z funkcji receive. Jest jednak trochę hackowaty sposób, aby to zrobić:

$blah.sortable({ 
    receive: function (ev, ui) { 
     var $target = $(this).data().sortable.currentItem; 
     var $source = $(ui.sender); 
     // now you can copy data from source to target 
     $target.data('data-item', $source.data('data-item')); 
    } 
});