Assistant personnalisé pour jQuery UI Draggable

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

Voici mon déplaçable éléments;

<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 lors d'un déplacement, l'utilisateur aurait un assistant, qui ne contient que le nom, mais pas le temps de l'élément.

Mon code est un peu plus complexe que cela, même, si ce que je suis à la recherche de tout le sélecteur qui me permettrait de sélectionner l'élément original, ou une copie de celui-ci, et ensuite faire toutes sortes de jQuery magie (éléments de filtrage, en ajoutant de nouveaux éléments, de classes, etc.)

Cependant, pour ma vie, je ne trouve pas cette, la documentation de déplaçable suce et personne à #jquery pourrait m'aider. Des idées?

Merci d'avance!

source d'informationauteur Emphram Stavanger

  1. 31

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

    this est actuellement élément traîné dans la helper fonction.

    Ayant 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 faire ceci:

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

    Note: j'ai ajouté de la classe à la <div> représentant le nom pour l'amour de la sélection, mais vous pouvez trouver d'autres moyens de le faire.

    Voici un jsfiddle pour vous de vérifier.

  2. 9

    OK, avec un test rapide, la suite du travail....

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

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

    MODIFIER: Ce qui semble empêcher l'élément supprimé, hmmm...

    Un CORRECTIF: Pas assez, 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 "se souvenir" de la variable il semble être ok pour ajouter une option de personnalisation de l'objet déplaçable qui peut contenir du 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"));
    }
});
  3. 3

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