web-dev-qa-db-fra.com

Aide personnalisée pour jQuery UI Draggable

J'ai une interface utilisateur jQuery déplaçable, 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 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 qu'en faisant glisser, l'utilisateur aurait un assistant qui ne contient que le nom, mais pas l'élément time.

Mon code réel est légèrement plus complexe que cela même, donc 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 dessus (filtrage éléments, ajout de nouveaux éléments, classes, etc.)

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

Merci d'avance!

javascriptjqueryjquery-uijquery-ui-draggable
17
Emphram Stavanger

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

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

Avoir 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é de la classe au <div> représentant le nom pour le sélectionner, mais vous pouvez trouver une autre manière de le faire.

Voici un jsfiddle à vérifier.

32
Didier Ghys

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 en tant que paramètre glissable. De plus, j'ai ajouté "bonjour" à l'exemple pour que le DIV d'aide puisse réellement contenir quelque chose.

[~ # ~] edit [~ # ~] : Cela semble empêcher la chute de l'élément, hmmm ...

UN FIX : Pas joli, mais cela fonctionne, peut-être que cela 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);
    }
});

Exemple ici

Si vous n'aimez pas l'idée de la variable "Remember", il semble correct d'ajouter une option personnalisée à l'objet déplaçable qui peut contenir le 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"));
    }
});
9
musefan

Une solution possible est

Violon: http://jsfiddle.net/SWbse/

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