jQuery UI ordenable y: cursor del mouse activo para el manejador

Estoy tratando de usar ordenable para reordenar los elementos de una lista. Tengo un identificador para cada elemento de la lista, que tiene :hover y :active css, ajustes del cursor, por lo que el cursor cambia cuando el usuario pasa el ratón por encima de los controladores (y nuevamente cuando lo arrastra).jQuery UI ordenable y: cursor del mouse activo para el manejador

<html> 
    <head> 
    <style> 
     span { width: 20px; background: red } 
     span:hover { cursor: -moz-grab; } 
     span:active { cursor: -moz-grabbing; } 
    </style> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
    <script> 
     $(function(){ 
     $('#sortable').sortable({ handle: 'span' }); 
     $('#sortable span').disableSelection(); 
     }); 
    </script> 
    </head> 
    <body> 
    <ul id="sortable"> 
     <li><span>grab 0 here</span> I'm 0!</li> 
     <li><span>grab 1 here</span> I'm 1!</li> 
     <li><span>grab 2 here</span> I'm 2!</li> 
     <li><span>grab 3 here</span> I'm 3!</li> 
     <li><span>grab 4 here</span> I'm 4!</li> 
     <li><span>grab 5 here</span> I'm 5!</li> 
     <li><span>grab 6 here</span> I'm 6!</li> 
     <li><span>grab 7 here</span> I'm 7!</li> 
    </ul> 
    </body> 
</html>

El problema es que el cursor :active deja de funcionar. No estoy seguro de por qué, funciona cuando no uso sortable, pero luego, cuando lo visualizo en Firebug, puedo ver que se está aplicando el cursor :hover, pero no hay cambio a :active.

(para simplificar, estoy usando -moz-grab y -moz-grabbing en mi ejemplo anterior, que no funciona en todos los navegadores).

¿Alguna idea de lo que podría estar yendo mal?

Fuente

2011-11-28 rampion

Ok, se me ocurrió un truco para resolver mi problema. Es hackish, así que si alguien tiene algo mejor, házmelo saber.

Básicamente, abandoné el :active a favor de una clase personalizada que se agrega en mousedown y se elimina en mouseup.

<html> 
 

 
<head> 
 
    <style> 
 
    span { 
 
     width: 20px; 
 
     background: red 
 
    } 
 
    span:hover { 
 
     cursor: -moz-grab; 
 
    } 
 
    .grabbed:hover { 
 
     cursor: -moz-grabbing; 
 
    } 
 
    </style> 
 

 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
 
    <script> 
 
    $(function() { 
 
     $('#sortable').sortable({ 
 
     handle: 'span' 
 
     }); 
 
     $('#sortable span').disableSelection(); 
 
     $('#sortable span').mousedown(function() { 
 
     $(this).addClass('grabbed') 
 
     }); 
 
     $('#sortable span').mouseup(function() { 
 
     $(this).removeClass('grabbed') 
 
     }); 
 
    }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <ul id="sortable"> 
 
    <li><span>grab 0 here</span> I'm 0!</li> 
 
    <li><span>grab 1 here</span> I'm 1!</li> 
 
    <li><span>grab 2 here</span> I'm 2!</li> 
 
    <li><span>grab 3 here</span> I'm 3!</li> 
 
    <li><span>grab 4 here</span> I'm 4!</li> 
 
    <li><span>grab 5 here</span> I'm 5!</li> 
 
    <li><span>grab 6 here</span> I'm 6!</li> 
 
    <li><span>grab 7 here</span> I'm 7!</li> 
 
    </ul> 
 
</body> 
 

 
</html>

Fuente

2011-11-28 22:10:21 rampion

<html> 
 

 
<head> 
 
    <style> 
 
    .grab { 
 
     cursor: hand; 
 
     cursor: grab; 
 
     cursor: -moz-grab; 
 
     cursor: -webkit-grab; 
 
    } 
 
    .grabbing { 
 
     cursor: grabbing; 
 
     cursor: -moz-grabbing; 
 
     cursor: -webkit-grabbing; 
 
    } 
 
    </style> 
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
 
    <script type="text/javascript"> 
 
    $(function() { 
 
     $(document).on('mousedown mouseup', '.grab, .grabbing', function(event) { 
 
     $(this).toggleClass('grab').toggleClass('grabbing'); 
 
     }); 
 
     $('#drag').draggable(); 
 
    }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div id="drag" class="grab" style="width: 200px;height:200px;">Grab Me</div> 
 
</body> 
 

 
</html>

No hay necesidad de controladores separados con el nuevo .en/.OFF funciones jQuery

Fuente

2012-01-20 00:53:58 oLinkWebDevelopment

Su fragmento ya no parece estar funcionando –

Una respuesta poco tarde, pero se puede utilizar el jQuery UI sortableoption cursor

$('#sortable').sortable({ 
    cursor: "grabbing" 
});

Para evitar jquery y css extra.

<html> 
    <head> 
    <style> 
     span { width: 20px; background: red } 
     span:hover { cursor: -moz-grab; } 
    </style> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
    <script> 
     $(function(){ 
     $('#sortable').sortable({ 
      handle: 'span', 
      cursor: 'grabbing' 
     }); 
     $('#sortable span').disableSelection(); 
     }); 
    </script> 
    </head> 
    <body> 
    <ul id="sortable"> 
     <li><span>grab 0 here</span> I'm 0!</li> 
     <li><span>grab 1 here</span> I'm 1!</li> 
     <li><span>grab 2 here</span> I'm 2!</li> 
     <li><span>grab 3 here</span> I'm 3!</li> 
     <li><span>grab 4 here</span> I'm 4!</li> 
     <li><span>grab 5 here</span> I'm 5!</li> 
     <li><span>grab 6 here</span> I'm 6!</li> 
     <li><span>grab 7 here</span> I'm 7!</li> 
    </ul> 
    </body> 
</html>

Fuente

2015-09-20 13:47:05

Esto todavía no parece solucionar el problema –

@ 99Problems-Syntaxain'tone ¿Qué versión de jqueryui has probado y no funcionó? La respuesta es 1.5 años ... y no lo he usado desde –

Si está utilizando la interfaz de usuario jQuery, la forma más fácil es usar las clases css:

.draggable-item { 
    cursor: pointer; // Fallback 
    cursor: -webkit-grab; 
} 

draggable-item:active, 
draggable-item.ui-draggable-dragging { 
    cursor: -webkit-grabbing; 
}

Fuente

2017-04-11 13:25:06

jQuery UI ordenable y: cursor del mouse activo para el manejador

Respuesta

Cuestiones relacionadas