Aide personnalisée pour l'interface utilisateur jQuery Dragable

Question

J'ai une interface utilisateur jQuery déplaçable, et j'ai essayé de créer une aide personnalisée qui contiendrait certaines informations de l'élément original, mais pas toutes.

Voici mes éléments déplaçables;

<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 aurait une aide qui ne contient que le nom, mais pas l'élément de temps.

Mon code actuel est légèrement plus complexe que cela, donc ce que je cherche vraiment, c'est un sélecteur qui me permettrait de sélectionner l'élément original, ou une copie de celui-ci, et ensuite faire toutes sortes de magie jQuery dessus (éléments de filtrage, ajout de nouveaux éléments, classes, etc.)

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

Merci d'avance!

Answer 1

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

this est l'élément actuellement déplacé dans la fonction helper.

Avoir le code 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> 

Vous pouvez le faire:

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

Note: J'ai ajouté la classe à l'<div> représentant le nom pour le bien de la sélection, mais vous pouvez trouver autre moyen de le faire. Il s'agit d'un jsfiddle pour vous de vérifier.

Answer 2

OK, avec un test rapide qui suit fonctionnera ....

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

avis vous ne passez pas une fonction en tant que paramètre draggable. Aussi, j'ai ajouté "bonjour" à l'exemple de sorte que l'aide DIV contient effectivement quelque chose.

EDIT: Cela semble empêcher l'élément étant tombé, hmmm ...

A FIX: Pas assez, mais cela fonctionne, peut-être il peut donner quelques idées d'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); 
    } 
}); 

Example Here

Si vous ne voulez pas l'idée de la variable « se souvenir », il semble être ok pour ajouter une option personnalisée à l'objet draggable que ca n tenir le fichier html d'origine ...

$("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

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