Tengo una interfaz de usuario jQuery que pueden arrastrarse, y he tratado de crear un helper personalizado que podría contener algunos pero no toda la información del elemento original.

Aquí está mi la posibilidad de arrastrar los elementos;

<ul>
  <li><div>Name</div> <span>12-12-2011</span></li>
  <li><div>Another name</div> <span>12-12-2011</span></li>
</ul>

Y jQuery;

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

La idea sería que mientras se arrastra, el usuario tendría un ayudante que contiene sólo el nombre, pero no el elemento de tiempo.

Mi código real es un poco más complejo que esto, incluso, así que lo que realmente estoy buscando es cualquier selector que me permita seleccionar el elemento original, o una copia de ella, y luego hacer todo tipo de jQuery magia (filtrado de elementos, añadiendo nuevos elementos, clases, etc.)

Sin embargo, por mi vida que no puedo encontrar esto, la documentación de la posibilidad de arrastrar una mierda y nadie en #jquery me ayudaría. Alguna idea?

Gracias de antemano!

Es requisito para el elemento bajar demasiado? Mi primer intento de responder a ofrecer los mismos resultados que los demás en que es costumbre arrastrado, pero no iba a permitir soltar. Así que he encontrado un trabajo en torno a caer también. No necesita mover el elemento original?
No necesito mover el elemento original, lo que estoy buscando es una especie de personalizado clon.
Hola, me gustaría saber ¿cómo se puede cambiar la posición de su personalizados clon después de eso ? Por ejemplo, yo tengo un elemento, 500×200 y la necesito para ser 175×50 mientras la arrastra, por Lo que utilizar ayudante con una función que devuelve un «tipo de personalizado clon» en 175×50 pero cuando voy a iniciar la acción de Arrastrar mi clonado elemento, comienza a partir de la esquina superior izquierda de la plena elemento no importa donde se encuentra el cursor… Alguna solución?

OriginalEl autor Emphram Stavanger | 2011-12-14

3 Comentarios

  1. 32

    Primero, su manera de llamar la draggable es defectuoso. La espera parámetro es un objeto literal, no una función.

    this es actualmente el elemento arrastrado en el helper función.

    Tener el siguiente código html

    <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>

    Usted puede hacer esto:

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

    Nota: he añadido la clase a la <div> que representa el nombre por el bien de la selección, pero usted puede encontrar otra manera de hacerlo.

    Aquí un jsfiddle para que usted pueda comprobar.

    Gracias, esto hizo que el truco! Sin embargo, me gustaría saber más acerca de la extraña manera esto parece funcionar. Por ejemplo, el ahorro de $(this).find(‘.nombre’) en una variable como lo haría en cualquier otro lugar en jQuery, con el fin de llamar a funciones adicionales en los que parece que no funciona aquí. ¿Por qué es eso?
    No estoy seguro de entender. Dentro de la función auxiliar que quieres decir ? Podría usted tenedor mi violín y modificar el código javascript para ilustrar ?

    OriginalEl autor Didier Ghys

  2. 9

    ACEPTAR, con una prueba rápida los siguientes….

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

    aviso de no pasar una función como la posibilidad de arrastrar parámetro. También, he añadido «hola» para el ejemplo para el ayudante DIV contiene realmente algo.

    EDITAR: Esto parece impedir que el elemento se ha caído, hmmm…

    Una REVISIÓN: No es bonita, pero esto funciona, tal vez se pueda dar algunas ideas para la mejora…

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

    Ejemplo Aquí

    Si no te gusta la idea de la «recordar» variable parece ser aceptar para agregar una opción de personalización a la que se pueden arrastrar objetos que puede contener el html original…

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

    OriginalEl autor musefan

  3. 3

    Una posible solución es

    Violín: http://jsfiddle.net/SWbse/

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

    OriginalEl autor Ehtesham

Dejar respuesta

Please enter your comment!
Please enter your name here