Tengo una aplicación con una larga lista que cambia con frecuencia, y necesito los elementos de la lista se pueden arrastrar.

He estado usando la interfaz de usuario jQuery que pueden arrastrarse plugin, pero es lento para agregar a más de 400 elementos de la lista, y tiene que ser re-añade cada vez nuevos elementos de la lista se agregan.

¿Alguien sabe de un plugin similar a la interfaz de usuario jQuery que pueden arrastrarse plugin que usa jQuery 1.3 del .live() eventos? Esto podría resolver ambos problemas.

  • ¿Qué if (!jQuery(this).data("init")) { jQuery(this).data("init", true);} hacer?
InformationsquelleAutor devongovett | 2009-11-26

10 Comentarios

  1. 44

    Wojtek se la solución funcionó a la perfección para mí. Terminé cambiando un poco a hacer es extender jQuery…

    (function ($) {
       $.fn.liveDraggable = function (opts) {
          this.live("mouseover", function() {
             if (!$(this).data("init")) {
                $(this).data("init", true).draggable(opts);
             }
          });
          return this;
       };
    }(jQuery));

    Ahora en lugar de llamarlo como:

    $(selector).draggable({opts});

    …sólo tiene que utilizar:

    $(selector).liveDraggable({opts})
    • Esto rompió mi js por completo. ¿Usted necesita para poner esto en algún lugar en particular, para extender la funcionalidad JQuery?
    • Es necesario declarar que después de cargar jQuery y antes de utilizarlo en el código. ¿Qué error te va?
    • Gracias impresionante!
    • Tropecé a través de este. Excelente material, gracias!
    • Usted se olvidó de devolver el elemento para el encadenamiento de
    • por el camino . esto es incorrecto, se le olvidó quitar el ratón de controlador cuando se establece la posibilidad de arrastrar. Voy a corregir el fn.liveDraggable en consecuencia.
    • También acabo de encontrar esta, mientras que tratando de resolver un problema similar. Excelente solución!
    • Mejor que el almacenamiento de datos en los elementos, ¿por qué no confiar en la presencia de el .la interfaz de usuario que se pueden arrastrar clase CSS ? Creo que esto es más claro
    • Hoy en día usted debe utilizar this.on('mouseover', selector, ...) en lugar de this.live('mouseover', ...)

  2. 21

    Este es un ejemplo de código que perfectamente trabajado para mí

    $('.gadgets-column').live('mouseover',function(){
        $(this).draggable();
    });
    • trabajó como un encanto para mí, gracias
    • +1 es la solución más sencilla.
    • es una solución fácil, pero la posibilidad de arrastrar se ejecuta en todos los elementos del DOM con los gadgets de la columna de la clase cada vez que se desplaza de uno de ellos…
    • No se que es, no cómo funciona jQuery, el $(this) se refiere al elemento que se mouseover d y esto puede ser incluso mucho más ligera que la de tener la posibilidad de arrastrar() conjunto de antes (es decir, la posibilidad de arrastrar la lógica no estará activa hasta pasar el ratón por encima).
    • Estoy de acuerdo con todo lo que dijo, simplemente no entendía lo que significaba. Cada vez que pase un elemento que tiene la clase gadgets-column el código se va a ejecutar. El código es $(this).draggable(); y eso es algo que no te gustaría que ejecutar cada vez que pase.
    • Increíblemente fácil, su solución más simple. Felicitaciones

  3. 10

    Usted podría hacer la función de contenedor como este:

    function liveDraggable(selector, options){
      jQuery(selector).live("mouseover",function(){
        if (!jQuery(this).data("init")) {
          jQuery(this).data("init", true);
          jQuery(this).draggable(options);
        }
      });
    }

    (Yo uso prototipo con jQuery – por eso me coloca jQuery() en lugar de $())

    Y ahora en vez de $(selector).draggable({opta}) uso liveDraggable(selector, {opta})

    • Esto funcionó perfecto para mí, gracias.
  4. 7

    Stldoug del código funcionó para mí, pero no hay necesidad de mantener el control del elemento .de datos(«init») en cada evento mouseover. También, es mejor usar «mousemove», como «mouseover» no consigue siempre activa si su ratón es ya el elemento cuando el .vivir función de patadas en el.

    (function ($) {
        $.fn.liveDraggable = function (opts) {
            this.live("mousemove", function() {
                $(this).draggable(opts);
            });
        };
    }(jQuery));

    Aquí está la forma de usarlo:

    $('.thing:not(.ui-draggable)').liveDraggable();

    El truco es añadir «:no(.la interfaz de usuario que se pueden arrastrar» a tu selección. Ya que jQuery se agrega automáticamente el «ui-draggable» clase a su elemento cuando se convierte en la posibilidad de arrastrar, el .vivir función ya no de destino. En otras palabras, sólo se activa una vez, a diferencia de la otra solución que desencadena más y más a medida que mover cosas alrededor.

    Idealmente, usted podría simplemente .separar la «mousemove», pero que no funciona con .en vivo, por desgracia.

    • Sí, definitivamente limpiador. ¿Qué piensa usted acerca de cómo mover la comprobación de «interfaz de usuario-draggable» dentro del plug-in de la función… algo así como «si(!este.hasClass(‘ui-draggable’)){…}»?
    • no podía el uso u delegado en su lugar. no puede especificar un adicional de selección.
  5. 4

    La combinación de las mejores respuestas de @juan y @jasimmk:

    Utilizando .live:

    $('li:not(.ui-draggable)').live('mouseover',function(){
        $(this).draggable(); //Only called once per li
    });

    .live está en desuso, aunque, mejor usar .on:

    $('ul').on('mouseover', 'li:not(.ui-draggable)', function(){
        $(this).draggable();  //Only called once per li
    });

    Como @juan explicó, .ui-draggable se agrega automáticamente a la posibilidad de arrastrar los métodos, por lo que excluyendo la posibilidad de que la clase con el selector, se asegura de que draggable() sólo se llama una vez en cada elemento. Y el uso de .on reducirá el alcance del selector, mejorando el rendimiento.

  6. 1

    Un ejemplo:

    Turco:

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

    Inglés:

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

    Nota: puede utilizar on() en lugar de live() o delegate. El on() tiene buen rendimiento que otros

  7. 0

    Otra opción es mezclar el ratón controlador con un extraíble clase, así:

    $('.outer-container').on('mouseover', '.my-draggable.drag-unbound', function(e) {
      $(this).draggable().removeClass('drag-unbound');
    });

    Es bastante sencilla y resuelve algunos de los problemas que otras respuestas tienen con la re-unión más y más a medida que mouseover.

  8. 0

    Un versión actualizada que no uso live como es obsoleto:

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

Dejar respuesta

Please enter your comment!
Please enter your name here