Assistant personnalisé pour jQuery UI Draggable

J'ai un jQuery UI draggable, et j'ai essayé de créer un assistant personnalisé qui contiendrait certaines mais pas toutes les informations de l'élément d'origine.

Voici mes éléments draggable;

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

Et jQuery;

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

L'idée serait que, tout en faisant glisser, l'utilisateur disposerait d'un assistant qui ne contient que le nom, mais pas l'élément de temps.

Mon code actuel est légèrement plus complexe que cela même, alors, ce que je recherche vraiment, c'est un sélecteur qui me permettrait de sélectionner l'élément d'origine, ou une copie de celui-ci, puis de faire toutes sortes de magie jQuery (filtrage Éléments, ajout de nouveaux éléments, classes, etc.)

Cependant, pour ma vie, je ne peux pas trouver cela, la documentation de draggable suce et personne à #jquery ne m'aiderait. Des idées?

Merci d'avance!

D'abord, votre façon d'appeler draggable est défectueuse. Le paramètre attendu est un objet littéral, pas une fonction.

this l'élément actuellement entraîné dans la fonction helper .

Ayant le html suivant

 <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>

Tu peux le faire:

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

Remarque: J'ai ajouté une classe au <div> représentant le nom pour le bien choisir, mais vous pouvez trouver une autre façon de le faire.

Voici un jsfiddle pour que vous puissiez vérifier.

OK, avec un test rapide, ce qui suit fonctionnera …

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

Notez que vous ne passez pas une fonction comme paramètre draggable. De plus, j'ai ajouté "bonjour" à l'exemple afin que l'assistant DIV contienne effectivement quelque chose.

EDIT : Cela semble empêcher l'élément d'être abandonné, hmmm …

A FIX : pas joli, mais cela fonctionne, peut-être peut-il donner des idées pour l'amélioration …

 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); } });

Exemple ici

Si vous n'aimez pas l'idée de la variable "Remember", il semble être correct d'ajouter une option personnalisée à l'objet draggable qui peut contenir le html original …

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

Une solution possible est

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

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