JQuery Sortable - Handle bug in IE?

Question

Mam listę elementów div, które chcę sortować. Każdy div ma w sobie tekst, a także uchwyt wewnątrz (z powodu interfejsu użytkownika, chcę sortować tylko wtedy, gdy lewa połowa elementu listy jest przeciągana). W Chrome/FireFox działa to świetnie, ale w IE kliknięcie tekstu nie pozwala na sortowanie, mimo że tekst znajduje się w zasięgu.

mam uproszczoną makieta problemu tutaj, upewnij się, że używasz Internet Explorer do testu: http://jsfiddle.net/t8Ebd/

Jestem zakładając, że jest to sprawa warstw, ale próbowałem następujące podejścia bez powodzenia:

• Zmiana z-indeksy tekstów i uchwyt
• $ ("itemName"). disableSelection();
• ms-user-select. none; user-select: none;
• dodanie klasy tekstowej do listy uchwytów - to rozwiązuje problem, ale nie będzie działać dla mnie, ponieważ nie chcę, aby tekst z prawej połowy pozycji listy powodował sortowanie
• Ustawianie koloru tła na uchwyt - wiem, że to brzmi dziwnie, ale jeśli ustawię kolor, to stanie się on najważniejszym elementem i dlatego działa poprawnie, chociaż ukrywa tekst, który nie zadziała dla mnie.

Ktoś ma jakieś inne pomysły?

Answer 1

Masz dodatkowy przecinek po ".sorthandle", który łamie w IE:

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

go zmienić na:

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

---

sugerowałem w komentarzu do korzystania metoda disableSelection() z jQuery UI. Chociaż wydaje się, że nie działa również.

udało mi się osiągnąć to, co jesteś po przez ustawienie background-color do uchwytu i krycie do zera, więc jest to niewidoczne:

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

DEMO

Oczywiście Usuwa twoja zielona granica, nie wiem, czy to ważne, czy nie.

Może to zadziała, jeśli użyjesz przezroczystego obrazu tła png. Domyślam się, że uchwyt bez tła, IE wybiera tekst pod spodem.

Answer 2

zmienić układ do: (typu hack)

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

i dodać tę CSS:

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

użyć tego jeśli chcesz zachować granicę na sorthandle