JQuery Sortable - Gestisce bug in IE?

Question

Ho una lista di div che voglio essere in grado di ordinare. Ogni div ha il testo al suo interno, e anche un handle all'interno di esso (a causa dell'interfaccia utente, desidero solo ordinare se viene trascinata la metà sinistra dell'elemento della lista). In Chrome/FireFox funziona molto bene, ma in IE se fai clic sul testo non ti consente di ordinare, anche se il testo è all'interno dell'handle.

Ho un mockup ridotta il problema qui, assicurarsi di utilizzare Internet Explorer per prova: http://jsfiddle.net/t8Ebd/

Sto assumendo questa è una cosa stratificazione, ma ho provato i seguenti approcci senza fortuna:

• Modifica z-indici di testo e gestire
• $ ("ItemName".) disableSelection();
• ms-user-select:. none; user-selezionare: none;
• aggiungendo la classe di testo per l'elenco delle maniglie - questo risolve il problema, ma non funziona per me dato che non voglio il testo nella metà destra della voce di elenco per far scattare l'ordinamento colore di sfondo
• Impostazione a il manico: so che sembra strano, ma se imposto un colore diventa l'elemento più in alto e quindi agisce correttamente, anche se nasconde il testo che non funzionerà per me.

Qualcuno ha altre idee ??

Answer 1

hai una virgola in più dopo ".sorthandle" che rompe in IE:

$("ul").sortable({ 
    handle: ".sorthandle", // here 
}); 

modificarla in:

$("ul").sortable({ 
    handle: ".sorthandle" 
}); 

---

ho suggerito nel commento da usare il metodo disableSelection() dall'interfaccia utente di jQuery. Anche se sembra non funzionare neanche nessuno dei due.

sono riuscito a realizzare quello che stai dopo impostando un background-color per la maniglia e l'opacità a zero quindi è invisibile:

.sorthandle { 
    ... 
    background-color: White; 
    opacity: 0; 
    filter: alpha(opacity = 0); 
}​ 

DEMO

Naturalmente questo rimuove il tuo bordo verde, non so se questo è importante o meno.

Forse questo funzionerebbe usando un'immagine di sfondo trasparente png. La mia ipotesi è che l'handle non abbia sfondo, IE seleziona il testo sottostante.

Answer 2

modificare il layout a: (una specie di hack)

<div class='sorthandle'><span>&nbsp;</span></div> 

e aggiungere questo css:

.sorthandle span{ 
    width:100%; 
    background-color:blue; 
    opacity:0.0; 
    filter:alpha(opacity=0); 
    display:block; 
} 

usare se si desidera mantenere il confine sul sorthandle