Sắp xếp JQuery - Xử lý lỗi trong IE?

Question

Tôi có một danh sách các div mà tôi muốn có thể sắp xếp. Mỗi div có văn bản trong nó, và cũng là một xử lý bên trong của nó (do giao diện người dùng, tôi chỉ muốn sắp xếp nếu nửa trái của mục danh sách được kéo). Trong Chrome/FireFox, công cụ này hoạt động tốt, nhưng trong IE nếu bạn nhấp vào văn bản, nó sẽ không cho phép bạn sắp xếp, ngay cả khi văn bản nằm trong tay cầm.

Tôi có một tước xuống mockup của vấn đề ở đây, chắc chắn rằng bạn sử dụng Internet Explorer để kiểm tra: http://jsfiddle.net/t8Ebd/

Tôi giả định này là một điều layering, nhưng đã thử các phương pháp sau đây không có may mắn:

• Thay đổi z-chỉ số của văn bản và xử lý
• $ ("itemname.") disableSelection();
• ms-user-chọn:. none; người dùng chọn: none;
• thêm lớp văn bản vào danh sách xử lý - điều này giải quyết được vấn đề nhưng sẽ không hoạt động vì tôi không muốn văn bản ở nửa bên phải của mục danh sách kích hoạt sắp xếp
• Đặt màu nền tay cầm - tôi biết điều này nghe có vẻ kì lạ, nhưng nếu tôi đặt màu thì nó sẽ trở thành phần tử cao nhất và do đó hoạt động chính xác, mặc dù nó ẩn nội dung không hoạt động cho tôi.

Bất kỳ ai có ý tưởng nào khác ??

Answer 1

Bạn đã có thừa một dấu phẩy sau ".sorthandle" mà phá vỡ trong IE:

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

Thay đổi nó để:

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

---

tôi đã gợi ý trong các bình luận để sử dụng phương thức disableSelection() từ jQuery UI. Mặc dù nó dường như không hoạt động được.

tôi đã quản lý để đạt được những gì bạn đang sau bằng cách thiết lập một background-color vào tay cầm và opacity xuống zero do đó, nó vô hình:

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

DEMO

Tất nhiên để loại bỏ việc này đường viền xanh của bạn, tôi không biết điều này có quan trọng hay không.

Có thể điều này sẽ hoạt động bằng cách sử dụng hình nền trong suốt png. Tôi đoán là xử lý không có nền, IE chọn văn bản bên dưới.

Answer 2

thay đổi cách bố trí của bạn để: (loại một hack)

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

và thêm css này:

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

SỬ DỤNG NÀY NẾU bạn muốn giữ lại biên giới trên sorthandle