Estoy tratando de agregar una clase a la que se pueden arrastrar evento con jQuery UI.

Sin embargo, el siguiente código que he escrito no está funcionando como se esperaba;

$(function () {
    $('ul.sortable div.draggable').draggable({
        start: function(event, ui) { ui.helper.addClass('move'); },
    });
});

Básicamente estoy tratando de agregar una sombra (mediante el movimiento de la clase) a la div.se pueden arrastrar. ¿Qué estoy haciendo mal como el evento de arrastre funciona, pero la sombra no aparece?

Gracias de antemano..

Puedes publicar tu HTML así?

OriginalEl autor webworker | 2012-07-30

3 Comentarios

  1. 14

    De la jQuery interfaz de usuario de la posibilidad de arrastrar la documentación:

    . Durante arrastre el elemento también se presenta una clase de interfaz de usuario-draggable arrastrando

    Puede escribir el CSS para aprovechar esta clase en vez de tratar de agregar una clase.

    Pero, ¿qué pasa si tengo el css de la CDN ????
    El CSS de la CDN es sólo el CSS base. Usted puede escribir su propio CSS o JavaScript) para apalancar o cambiar el comportamiento predeterminado de las clases.

    OriginalEl autor JasCav

  2. 5

    Mismo CSS herencia aún se aplica. Si usted tiene su propia hoja de estilos incluir algo como

    .ui-draggable-dragging{
        box-shadow:0 0 2px #000;
    }

    Si usted no tiene una hoja de estilos. Usted puede añadir esta en línea dentro de los archivos html utilizando <style> etiquetas

    OriginalEl autor Alex Neigher

  3. 4

    Supongo que agregamos una nueva class my_class en dargging inicio, a continuación, el código debe ser como:

    $(function () {
        $('ul.sortable div.draggable').draggable({
             start: function( event, ui ) {
                  $(this).addClass('my_class'); 
             }
        });
    });

    css:

    .my_class{
    /* YOUR CLASS CSS */
    }

    Consulte este JSFIDDLE para la adición y eliminación de clase en arrastre de inicio y arrastre final

    Esto funciona cuando se utiliza el clon ayudante.

    OriginalEl autor Rahul Gupta

Dejar respuesta

Please enter your comment!
Please enter your name here