ejemplos - jquery ui draggable
Arrastre y suelte ordenable de Jquery que no muestre el cursor de ''mover'' (4)
El problema parece ser que su configuración de CSS se usa en todos los estados.
Puede solucionar esto configurando el cursor para "arrastrar" y también a través de CSS:
#contentLeft li:hover {
cursor: pointer;
}
#contentLeft li.ui-sortable-helper{
cursor: move;
}
Aquí hay un ejemplo: http://jsfiddle.net/mWYEH/
Estoy usando esta función .sortable en mi lista. Mi problema es que quiero que muestre el cursor de movimiento cuando se está usando el método de arrastrar y soltar, y el cursor de puntero solo al pasar el cursor. Tengo mi css llamando al cursor: puntero al pasar el mouse, pero no parece mostrar el cursor de movimiento en absoluto. Todo lo demás funciona bien. Código abajo.
<!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>
Separado css doc 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 db poblada de una sentencia while. Cada elemento de la lista es un enlace, así que quiero que muestre la opción {cursor: Pointer;}. Pero cuando se arrastra lo necesito para mostrar el {cursor: mover;}. Pensé que el código anterior lo haría pero no funciona. Me confundí con el primer post, así que pensé en aclarar esto un poco mejor.
Encontré una manera menos contundente de hacerlo:
#contentLeft li:not(.ui-sortable-helper) {
cursor: pointer;
}
Prueba esto:
$element.droppable({
over: function() {
$(''body'').css(''cursor'',''copy'');
},
out: function() {
$(''body'').css(''cursor'',''no-drop'');
},
});
Le indicará al usuario si es arrastrable si está sobre un dropable.
<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 acabo de hacer lo que escribo aquí