jQuery UI ordinabile e: cursore del mouse attivo per la maniglia

Sto tentando di utilizzare Sortable per riordinare gli elementi di una lista. Ho un handle per ogni elemento della lista, che ha le impostazioni del cursore css :hover e :active, in modo che il cursore cambi quando l'utente passa sopra le maniglie (e di nuovo durante il trascinamento).jQuery UI ordinabile e: cursore del mouse attivo per la maniglia

<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>

Il problema è che il cursore :active smette di funzionare. Non so perché, funziona quando non uso sortable, ma in seguito, quando lo faccio apparire in firebug, posso vedere che il cursore :hover viene applicato, ma non lo spostamento su :active.

(per semplicità, sto usando -moz-grab e -moz-grabbing nell'esempio precedente, che non funziona in tutti i browser).

Qualche idea cosa potrebbe andare storto?

fonte

2011-11-28 rampion

Ok, mi sono inventato un trucco per risolvere il mio problema. È un hacker, quindi se qualcuno ha qualcosa di meglio, fammi sapere.

Fondamentalmente, ho abbandonato lo :active in favore di una classe personalizzata che viene aggiunta su mousedown e rimossa su 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>

fonte

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>

Nessuna necessità per i gestori separati con il nuovo .On/.OFF funzioni jQuery

fonte

2012-01-20 00:53:58 oLinkWebDevelopment

tuo frammento non sembra funzionare –

Una risposta tardiva po ', ma è possibile utilizzare il jQuery UI sortableoption cursor

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

Così è possibile evitare jquery e css aggiuntivi.

<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>

fonte

2015-09-20 13:47:05

Questo ancora non sembra risolvere il problema –

@ 99Problems-Syntaxain'tone Quale versione di jqueryui hai provato e non ha funzionato? La risposta è di 1,5 anni ... e da allora non l'ho più usata –

Se si utilizza jQuery UI, il modo più semplice è quello di utilizzare le classi CSS:

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

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

fonte

2017-04-11 13:25:06

jQuery UI ordinabile e: cursore del mouse attivo per la maniglia

risposta

Problemi correlati