jQuery Glisser-Déposer à l'Aide d'Événements en Direct

J'ai une application avec une longue liste qui change fréquemment, et j'ai besoin d'éléments de la liste à être déplaçable.

J'ai été en utilisant l'INTERFACE utilisateur de jQuery déplaçable plugin, mais il est lent à ajouter à plus de 400 éléments de la liste, et doit être ajouté à chaque fois de nouveaux éléments de la liste sont ajoutés.

Personne ne sait d'un plugin similaire à la jQuery UI déplaçable plugin qui utilise jQuery 1.3 du .live() événements? Cela permettrait de résoudre ces deux problèmes.

Ce n' if (!jQuery(this).data("init")) { jQuery(this).data("init", true);} faire?

InformationsquelleAutor devongovett | 2009-11-26

44

Wojtek la solution a fonctionné parfaitement pour moi. Je me suis retrouvé en le modifiant un peu pour le faire prolonger jQuery...
```
(function ($) {
   $.fn.liveDraggable = function (opts) {
      this.live("mouseover", function() {
         if (!$(this).data("init")) {
            $(this).data("init", true).draggable(opts);
         }
      });
      return this;
   };
}(jQuery));
```
Maintenant, au lieu de l'appeler comme:
```
$(selector).draggable({opts});
```
...il suffit d'utiliser:
```
$(selector).liveDraggable({opts})
```
- C'est mon js tout à fait. Avez-vous besoin de mettre quelque part en particulier, pour étendre les fonctionnalités JQuery?
- Vous devez déclarer après chargement de jQuery et avant de l'utiliser dans votre code. Quelle erreur avez-vous?
- Génial merci!
- Juste trébuché à travers le présent. Great stuff, merci!
- Vous avez oublié de retourner l'élément de chaînage
- par la voie . ceci est incorrect, vous avez oublié de supprimer le passage de la souris gestionnaire lorsque vous définissez la déplaçable. Je vais corriger le fn.liveDraggable en conséquence.
- Aussi juste trouvé cela tout en essayant de résoudre un problème similaire. Excellente solution!
- Mieux que le stockage de données dans les éléments, pourquoi ne pas compter sur la présence de l' .ui-déplaçable classe CSS ? Je pense que c'est plus léger
- Aujourd'hui, vous devez utiliser this.on('mouseover', selector, ...) au lieu de this.live('mouseover', ...)
InformationsquelleAutor stldoug
21

Ceci est un exemple de code qui a parfaitement fonctionné pour moi
```
$('.gadgets-column').live('mouseover',function(){
    $(this).draggable();
});
```
- a travaillé comme un charme pour moi, merci
- +1 c'est la solution la plus simple.
- c'est une solution facile, mais déplaçable est exécutée sur tous les éléments du DOM avec gadgets-la colonne de la classe à chaque fois vous passez de l'un d'eux...
- Non, ce n'est pas la façon dont travaille jQuery, le $(this) se réfère à l'élément en cours de mouseover avais et cela peut être encore beaucoup plus léger que d'avoir draggable() set avant (c'est à dire la déplaçable logique ne sera pas actif jusqu'à ce que vous mouseover).
- Je suis d'accord avec tout ce que tu dis, vous n'avez tout simplement pas comprendre ce que je voulais dire. Chaque fois que vous placez un élément qui a de la classe gadgets-column le code à exécuter. Le code est $(this).draggable(); et ce n'est pas quelque chose que vous souhaitez exécuter à chaque fois que vous passez.
- Incroyablement facile, c'est la solution la plus simple. Félicitations
InformationsquelleAutor Jasim Muhammed
10

Vous pourriez faire wrapper fonction comme ceci:
```
function liveDraggable(selector, options){
  jQuery(selector).live("mouseover",function(){
    if (!jQuery(this).data("init")) {
      jQuery(this).data("init", true);
      jQuery(this).draggable(options);
    }
  });
}
```
(J'utilise prototype avec jQuery - c'est pourquoi j'ai placé jQuery() au lieu de $())

Et maintenant, au lieu de $(selector).draggable({opte}) utilisation liveDraggable(sélecteur {opte})
- Cela a fonctionné parfait pour moi, merci.
InformationsquelleAutor wojtekk
7

Stldoug du code a fonctionné pour moi, mais il n'y a pas besoin de garder le contrôle de l'élément .de données("init") sur chaque événement mouseover. Aussi, il est préférable d'utiliser des "mousemove", comme "mouseover" ne permet pas toujours de se déclencher si votre souris est déjà plus de l'élément lors de l' .en direct de la fonction coups de pied dans.
```
(function ($) {
    $.fn.liveDraggable = function (opts) {
        this.live("mousemove", function() {
            $(this).draggable(opts);
        });
    };
}(jQuery));
```
Voici comment l'utiliser:
```
$('.thing:not(.ui-draggable)').liveDraggable();
```
L'astuce consiste à ajouter ":not(.ui-déplaçable)" à votre sélection. Depuis jQuery va ajouter automatiquement le "ui-déplaçable" classe à votre élément lorsqu'il devient déplaçable, l' .en direct de la fonction ne sera plus la cible. En d'autres mots, il ne déclenche une fois, à la différence de l'autre solution qui déclenche encore et que vous vous déplacez trucs autour.

Idéalement, vous avez juste à .séparer la "mousemove", mais qui ne fonctionne pas avec .vivre, malheureusement.
- Oui, nettement plus propre. Que pensez-vous de déplacer la case à cocher pour "ui-déplaçable" à l'intérieur de la fonction de plug-in... quelque chose comme "if(!c'.hasClass('ui-déplaçable")) {...}"?
- couldnt u utilisation délégué à la place. vous pouvez y indiquer le sélecteur.
InformationsquelleAutor john
4

Combinant les meilleures réponses de @john et @jasimmk:

À l'aide de .live:
```
$('li:not(.ui-draggable)').live('mouseover',function(){
    $(this).draggable(); //Only called once per li
});
```
.live est obsolète, mieux utiliser .on:
```
$('ul').on('mouseover', 'li:not(.ui-draggable)', function(){
    $(this).draggable();  //Only called once per li
});
```
Comme @john expliqué, .ui-draggable est automatiquement ajouté à déplaçable méthodes, par l'exclusion de la classe avec le sélecteur, vous vous assurez que draggable() est appelé une seule fois sur chaque élément. Et à l'aide de .on permettra de réduire la portée de la sélection, l'amélioration de la performance.

InformationsquelleAutor Yarin

Un exemple:

Turc:

<div id="diyalogKutusu">
    <div id="diyalog-baslik">..baslik..</div>
    <div id="icerik">..icerik..</div>
</div>

$(document).on("mouseover", "#diyalogKutusu", function() {
    $(this).draggable({ handle: '#diyalog-baslik' });
});

Anglais:

<div id="dialogBox">
    <div id="dialogBox-title">..title..</div>
    <div id="content">..content..</div>
</div>

$(document).on("mouseover", "#dialogBox", function() {
    $(this).draggable({ handle: '#dialogBox-title' });
});

Remarque: Vous pouvez utiliser on() au lieu de live() ou delegate. Le on() a de bonnes performances que les autres

InformationsquelleAutor

$("html divs to drag").appendTo("#layoutDiv").draggable(options);

JSFiddle

InformationsquelleAutor yokesh ganesan

0

Une vieille question. Mais threedubmedia a glisser et déposer le plugin à vivre, comme de v 1.7 connu simplement comme "sur") de soutien.
http://threedubmedia.com/code/event/drop
Ne l'ai pas utilisé beaucoup donc je ne peux pas rendre compte de la performance, etc. mais semble raisonnable.

InformationsquelleAutor Danny C
0

Une autre option consiste à mélanger le mouseover gestionnaire avec un amovible classe, comme suit:
```
$('.outer-container').on('mouseover', '.my-draggable.drag-unbound', function(e) {
  $(this).draggable().removeClass('drag-unbound');
});
```
C'est assez simple, et résout certains des problèmes que d'autres réponses ont avec re-liaison plus et plus comme vous le passage de la souris.

InformationsquelleAutor Micah

Un version mise à jour qui n'utilise pas de vivre car c'est déconseillé:

function liveDraggable(selector, options) {
    $(document).on('mouseover', selector, function () {
        if (!$(this).data("init")) {
            $(this).data("init", true);
            $(this).draggable(options);
        }
    });
}

InformationsquelleAutor ErwanLent

Vous devez vous connecter pour publier un commentaire.