Dưới đây là một ví dụ đơn giản sử dụng câu trả lời của tôi cho câu hỏi trước đây của bạn: http://www.jsfiddle.net/yijiang/83W7X/2/embedded/result
var selected = [];
function drawSelection(){
if(selected.length){
selected.sort(function(a, b){
if(a.sourceIndex){
return a.sourceIndex - b.sourceIndex;
} else if(a.compareDocumentPosition){
if(a.compareDocumentPosition(b) == Node.DOCUMENT_POSITION_PRECEDING){
return 1;
} else {
return -1;
}
}
});
var range = rangy.createRange(),
sel = rangy.getSelection();
range.setStart(selected[0].children[0], 0);
range.setEnd(selected[selected.length - 1].children[0], 1);
sel.setSingleRange(range);
}
}
$('ul').selectable({
delay: 100,
selecting: function(event, ui) {
if(ui.selecting.getAttribute('class').indexOf('wrapper') !== -1 && $.inArray(ui.selecting, selected) === -1) {
selected.push(ui.selecting);
drawSelection();
}
},
unselecting: function(event, ui){
if(ui.unselecting.getAttribute('class').indexOf('wrapper') !== -1 && $.inArray(ui.unselecting, selected) > -1){
selected.splice($.inArray(ui.unselecting, selected), 1);
drawSelection();
}
}
});
Nó pha trộn Selectable jQuery UI với thư viện Rangy tuyệt vời Tim Down để tạo ra một cái gì đó tương tự như những gì bạn yêu cầu. Tôi nghĩ. Những gì bạn yêu cầu không rõ ràng.
Mã giữ một mảng các thành phần hiện tại được chọn li. Phần thứ hai của mã thêm vào các trình xử lý sự kiện có liên quan và các tùy chọn.Hàm drawSelection được gọi mỗi lần một phần tử được chọn hoặc bỏ chọn. Hàm đầu tiên sắp xếp tất cả các phần tử theo vị trí của chúng trong DOM, sau đó tiến hành vẽ một vùng chọn từ lần chọn đầu tiên được chọn li đến cuối cùng.
Mã, như theazureshadow's, chỉ là bằng chứng-khái niệm, vì tôi đang trừu tượng những gì thực sự là nhiệm vụ đơn giản khi chọn thư viện Rangy khá nặng nề. Nó cũng không hoạt động tốt và có thể thực hiện với một số phép tái cấu trúc.
Nguồn
2010-11-10 14:32:54
"vô hình" có nghĩa là gì? là nó hiển thị không, forecolor = backcolor, có thể nhìn thấy sai? Có một plugin hình ảnh jquery cho phép bạn chọn một khu vực trên một hình ảnh, nhưng phần văn bản bạn sẽ phải viết mã một chút. –