javascript - traduccion - Ayudante personalizado para jQuery UI Draggable

jquery drag and drop list

Question

Tengo una interfaz de usuario jQuery que se puede arrastrar, y he intentado crear un ayudante personalizado que contendría algo, pero no toda la información del elemento original.

Aquí están mis elementos arrastrables;

<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 al arrastrar, el usuario tenga un ayudante que contenga solo el nombre, pero no el elemento de tiempo.

Mi código real es un poco más complejo que esto, por lo que lo que realmente busco es cualquier selector que me permita seleccionar el elemento original, o una copia del mismo, y luego hacer todo tipo de magia jQuery en él (filtrado elementos, añadiendo nuevos elementos, clases, etc.)

Sin embargo, para mi vida no puedo encontrar esto, la documentación de arrastrables apesta y nadie en #jquery me ayudaría. ¿Algunas ideas?

¡Gracias por adelantado!

Answer 1

De acuerdo, con una prueba rápida funcionará lo siguiente ...

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

Observe que no pasa una función como un parámetro que se puede arrastrar. Además, he agregado "hola" al ejemplo para que el DIV ayudante realmente contenga algo.

EDIT : Esto parece evitar que el elemento se caiga, hmmm ...

UNA REVISIÓN : No es bonito, pero esto funciona, quizás pueda dar algunas ideas para mejorar ...

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 variable "recordar", parece que está bien agregar una opción personalizada al objeto que se puede arrastrar y 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"));
    }
});

Answer 2

Primero su forma de llamar a draggable es defectuosa. El parámetro esperado es un objeto literal, no una función.

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

Teniendo el siguiente 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>

Puedes hacerlo:

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

Nota: Agregué clase a <div> representa el nombre por el simple hecho de seleccionarlo, pero puedes encontrar cualquier otra forma de hacerlo.

Aquí hay un jsfiddle para que compruebes.

Answer 3

Una posible solución es

Fiddle: http://jsfiddle.net/SWbse/

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