2009-11-24 38 views
5

Tôi đang làm việc trên một dự án mà tôi có thể tạo tài liệu Word, một trong các chức năng là xác định mục lục. Tôi muốn TOC của tôi là một danh sách jQuery có thể sắp xếp để phân loại các chương.Hành vi có thể sắp xếp bất ngờ jQuery

Tôi đang truy lại dữ liệu đệ quy từ bảng MySQL, có chức năng như mong đợi. Vì tôi thấy có một số hành vi lạ trong IE7 (và các phiên bản khác có thể), tôi đã chuyển về cơ bản và thử những điều sau đây trong một tệp HTML đơn giản mà không có bất kỳ cấu trúc do DB tạo ra nào.

<!doctype html> 
<html> 
<head> 
<script type="text/javascript" src="./jquery-1.3.2.js"></script> 
<script type="text/javascript" src="./ui/jquery-ui-1.7.2.custom.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
    $("ul.list").sortable({ 
     opacity: 0.7, 
     helper: 'clone', 
     cursor: 'move', 
     tolerance: 'pointer' 
    }); 
    $("ul.list").selectable(); 
    $("ul.list").disableSelection(); 
}); 
</script> 
<style type="text/css"> 
ul.list { 
    list-style:none; 
    padding:none; 
    margin:none; 
    border:1px solid #EFEFEF;} 
ul.list:hover { 
    border:1px dotted #333;} 
</style> 
</head> 
<body> 
    <ul class="list"> 
    <li>Chapter 1</li> 
    <li>Chapter 2 
     <ul class="list"> 
     <li>Chapter 2.1</li> 
     <li>Chapter 2.2</li> 
     </ul> 
    </li> 
    </ul> 
</body> 
</html> 

Với nguồn này (bất kể số lượng sublevels) tôi mong mỗi phân mục là danh sách có thể sắp xếp duy nhất trong chương cha của nó. Trong FireFox, nó hoạt động như mong muốn, nhưng tiếc là tại nơi làm việc IE7 là trình duyệt mặc định và không thể chuyển đổi được.

Có ai có một số đề xuất phải làm gì không?

Cơ bản tôi chỉ muốn sắp xếp lại danh sách và danh sách lồng nhau. Tại thời điểm này tôi chỉ có thể kéo arround các mainchapters, khi tôi cố gắng kéo một subchapter toàn bộ danh sách cấu trúc từ cha mẹ tương ứng là nhận được kéo. Vì vậy, khi tôi cố gắng kéo 'Chương 2.2' để đặt nó ở trên 'Chương 2.1', tôi thực sự đang kéo 'Chương 2', với tính duy nhất để kéo nó lên trên 'Chương 1'.

Tôi hy vọng câu hỏi của tôi đủ rõ ràng.

Here's a Demo. add /edit vào URL để xem mã và chơi với nó

+4

thêm bản trình diễn cho bạn để mọi người có thể thấy sự cố trong IE7 –

+0

Cảm ơn !, Tôi đã cho bạn +1 để đặt bản trình diễn trực tuyến. Tôi ở đằng sau hàng chục bức tường lửa ở đây, nên tôi đã không thể làm điều đó. Bản demo thực sự minh họa hoàn hảo những gì đang xảy ra. – Ben

+0

@Russ Cam: jsbin là tốt :) – Xinus

Trả lời

19

Chỉ cần thêm này

$('ul.list').bind('mousedown', function(e) { 
    e.stopPropagation(); 
}); 

Điều này sẽ ngăn chặn IE từ bọt lên sự kiện mousedown để phụ huynh ul, gây ra các hành vi sắp xếp lạ bạn đã thấy. Bây giờ nó sẽ hoạt động như mong đợi

+1

Cảm ơn! Điều đó thực sự đã làm các trick! +1 + Chấp nhận! Cảm ơn một lần nữa! – Ben

+1

Người đàn ông, jitter, bạn vừa lưu lại ngày của tôi! +1 –

+1

+1 Ngoài ra, tôi đã sửa chữa. –

Các vấn đề liên quan