Jquery ordenable arrastrar y soltar no muestra el cursor 'mover'

Im usando esta función. Disponible en mi lista. Mi problema es que quiero que se muestre el cursor de movimiento cuando se usa el método de arrastrar y soltar, y el cursor del puntero solo al pasar el mouse. Tengo mi css llamando al cursor: puntero en vuelo estacionario, pero no parece mostrar el cursor de movimiento en absoluto. Todo lo demás funciona bien Código a continuación.Jquery ordenable arrastrar y soltar no muestra el cursor 'mover'

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css"/> 
    <link rel="stylesheet" href="blah.css" type="text/css" /> 
    <script type="text/javascript" charset="UTF-8"> 
    $(document).ready(function() 
    { 
    $("#sortable").sortable({ 
     /*helper: 'clone', Tried this =(*/ 
     distance: 5, 
     delay: 300, 
     opacity: 0.6, 
     cursor: 'move', 
     update: function() {} 
    }); 
    }); 
    </script> 
    </head> 
    <body> 
    <ul id="sortable"> 
     <li class="ui-state-default">Item 1</li> 
     <li class="ui-state-default">Item 2</li> 
     <li class="ui-state-default">Item 3</li> 
    </ul> 
    </body> 
    </html>

Seperate doc css contiene:

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } 
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.1em; line-height: 18px; height: 18px; } 
#sortable li span { position: absolute; margin-left: -1.3em; } 

/* HERE'S THE IMPORTANT STUFF! */ 
#sortable li:hover { 
    cursor: pointer; 
} 

#sortable li.ui-sortable-helper { 
    cursor: move; 
}

cualquier ayuda sería muy apreciada. Gracias por adelantado. =)

Quizás un poco más de información. Es una lista poblada db de una sentencia while. cada elemento de la lista es un enlace, por lo que quiero que muestre la opción {cursor: Puntero;}. Pero cuando se arrastra, necesito que muestre el {cursor: mover;}. Pensé que el código anterior lo haría, pero no funciona. Me confundí con la primera publicación, así que pensé en aclarar esto un poco mejor.

Fuente

2011-11-02 banjo

puede editar su pregunta y agregar la información adicional en lugar de agregarla como comentarios. Los comentarios son más para que otros le pidan más información para ayudarlos a responder. –

Hecho eso - puede eliminar el comentario si tiene la oportunidad. – polarblau

Lo sentimos todavía nuevo en este sitio. =) – banjo

El problema parece ser que su configuración de CSS se usa en todos los estados.

Usted puede evitar esto ajustando el cursor de "arrastre", así a través de CSS:

#contentLeft li:hover { 
    cursor: pointer; 
} 

#contentLeft li.ui-sortable-helper{ 
    cursor: move; 
}

He aquí un ejemplo: http://jsfiddle.net/mWYEH/

Fuente

2011-11-02 14:22:42 polarblau

¡Perfecto! Muchas gracias. =) Voy a contar cuentos tuyos a mis nietos. – banjo

Ok, parece que estaba equivocado. No funciona más. He editado la publicación anterior con lo que tengo (versión de prueba para la prueba). ¿Puedes ver lo que estoy haciendo mal? – banjo

No, me parece bien y funciona si lo pruebo. Posiblemente esté anulando los estilos en un lugar diferente. ¿Tienes el proyecto en línea en alguna parte? – polarblau

encontrado una manera menos contundente para hacerlo:

#contentLeft li:not(.ui-sortable-helper) { 
    cursor: pointer; 
}

Fuente

2011-12-13 01:14:00

FYI para cualquier otra persona que pueda intentar usar ': not()'. No es compatible con navegadores antiguos si eso es un problema para ti. http://www.w3schools.com/cssref/sel_not.asp – praneetloke

<ul id="sortable"> 
     <li class="ui-state-default" style="cursor:pointer;">Item 1</li> 
     <li class="ui-state-default" style="cursor:pointer;">Item 2</li> 
     <li class="ui-state-default" style="cursor:pointer;">Item 3</li> 
</ul>

Eliminar de css. Porque también me enfrento al mismo problema. y yo sólo hago lo que escribo aquí

Fuente

2014-03-05 12:51:24 Nadeem

No utilice estilos en línea, especialmente para no anular los estilos definidos en una hoja de estilo. La razón por la que esto funciona es porque los estilos en línea tienen una prioridad más alta. Pero la solución tiene el precio de una peor capacidad de mantenimiento. – polarblau

Prueba esto:

$element.droppable({ 
    over: function() { 
    $('body').css('cursor','copy'); 
    }, 
    out: function() { 
    $('body').css('cursor','no-drop'); 
    }, 
});

indicará al usuario si la arrastrable si más de un lanzables.

Fuente

2017-12-05 07:18:45 yPhil

Jquery ordenable arrastrar y soltar no muestra el cursor 'mover'

Respuesta

Cuestiones relacionadas