Niestandardowy helper dla jQuery UI Draggable

Question

Mam jQuery UI przeciągalny i próbowałem utworzyć niestandardowego pomocnika, który zawierałby niektóre, ale nie wszystkie informacje o oryginalnym elemencie.

Oto moje przeciągalne elementy;

<ul> 
    <li><div>Name</div> <span>12-12-2011</span></li> 
    <li><div>Another name</div> <span>12-12-2011</span></li> 
</ul> 

I jQuery;

$("ul li").draggable(function(){ 
    helper: function(){ 
    return $("<div></div>"); 
    } 
}); 

Pomysł polegał na tym, że podczas przeciągania użytkownik ma pomocnika, który zawiera tylko nazwę, ale nie element czasu.

Mój aktualny kod jest nieco bardziej skomplikowany niż ten, nawet, więc to, czego naprawdę szukam, to dowolny selektor, który pozwoli mi wybrać oryginalny element lub jego kopię, a następnie wykonać wszystkie rodzaje magii jQuery na nim (elementy filtrujące, dodawanie nowych elementów, klas itp.)

Jednak dla mojego życia nie mogę tego znaleźć, dokumentacja przeciągalnych bzdetów i nikogo w # jquery nie pomogłaby mi. Jakieś pomysły?

Z góry dziękuję!

Answer 1

Pierwszy swój sposób wywoływania draggable jest uszkodzony. Oczekiwany parametr jest literałem obiektu, a nie funkcją.

this jest aktualnie przeciąganym elementem w funkcji helper.

uwzględniając następujące html

<ul> 
    <li><div class="name">Name</div> <span>12-12-2011</span></li> 
    <li><div class="name">Another name</div> <span>12-12-2011</span></li> 
</ul> 

Można to zrobić:

$('ul li').draggable({ 
    helper: function() { 
     //debugger; 
     return $("<div></div>").append($(this).find('.name').clone()); 
    } 
}); 

Uwaga: Dodałem klasę do <div> reprezentujący nazwę dla dobra wybierając go, ale można znaleźć dowolny w inny sposób.

Oto jsfiddle, aby sprawdzić.

Answer 2

OK, z szybkiego testu dodaje zadziała ....

$("ul li").draggable({ 
    helper: function() { 
     return $("<div>hello</div>"); 
    } }); 

zawiadomienie nie przekazać funkcję jako Draggable parametru. Dodałem również "witaj" do przykładu, aby pomocnik DIV rzeczywiście coś zawierał.

EDIT: To wydaje się zapobiegać element przed upadkiem, hmmm ...

poprawkę: Nie całkiem, ale to działa, może to dać kilka pomysłów na poprawę ...

var remember; 
$("ul li").draggable({ 
    helper: 'original', 
    start: function(e, ui) { 
     remember = $(this).html(); 
     $(this).html("<div>hello</div>"); 
    }, 
    stop: function(e, ui) { 
     $(this).html(remember); 
    } 
}); 

Example Here

Jeśli nie podoba mi się pomysł z „pamiętać” zmienna wydaje się być ok, aby dodać opcję niestandardową do Draggable obiektu ca n posiadać oryginalną HTML ...

$("ul li").draggable({ 
    helper: 'original', 
    start: function(e, ui) { 
     $(this).draggable("option", "olddata", $(this).html()); 
     $(this).html("<div>hello</div>"); 
    }, 
    stop: function(e, ui) { 
     $(this).html($(this).draggable("option", "olddata")); 
    } 
}); 

Answer 3

Jednym z możliwych rozwiązań jest

Fiddle: http://jsfiddle.net/SWbse/

$(document).ready(function() { 
     $("ul li").draggable({ 
     helper: 'clone', 
     start: function(event, ui){ 
      ui.helper.children('span').remove(); 
     }  
    }); 
    });