JQuery Sortable - Handle bug in IE?

Question

I have a list of divs that I want to be able to sort. Each div has text in it, and also a handle inside of it (due to the UI, I only want to sort if the left half of the list item is dragged). In Chrome/FireFox this works great, but in IE if you click on the text it won't let you sort, even though the text is within the handle.

I have a stripped down mockup of the problem here, make sure you use Internet Explorer to test: http://jsfiddle.net/t8Ebd/

I'm assuming this is a layering thing, but have tried the following approaches with no luck:

• Changing z-indexes of text and handle
• $(".itemname").disableSelection();​​​​
• ms-user-select: none; user-select:none;
• adding the text class to the list of handles - this solves the problem, but will not work for me since I don't want the text on the right half of the list item to trigger sorting
• Setting background color on the handle - I know this sounds weird, but if I set a color then it becomes the top most element and thus acts correctly, although it hides the text which won't work for me.

Anyone have any other ideas??

Answer 1

You've got an extra comma after ".sorthandle" that breaks in IE:

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

Change it to:

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

---

I have suggested in the comment to use the method disableSelection() from jQuery UI. Although it does not seem to quite work neither.

I have managed to achieve what you're after by setting a background-color to the handle and the opacity to zero so it's invisible:

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

DEMO

Of course this removes your green border, I don't know if this is important or not.

Maybe this would work by using a png transparent background-image. My guess is that the handle having no background, IE selects the text underneath.

Answer 2

change your layout to: (kind of a hack)

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

and add this css:

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

USE THIS IF you want to keep the border on the sorthandle