Giao diện người dùng JQuery Kéo/Droppable với nhiều phạm vi?

Question

Tôi muốn có một số lớp kéo, mỗi lớp tương ứng với một lớp phân đoạn. Nhưng ngoài ra, tôi muốn có một "thùng rác" riêng biệt, nơi tất cả các vật dụng kéo có thể được giảm xuống cho đến khi có thể tìm thấy một vật thể phù hợp cho chúng.

Bây giờ, điều này có thể dễ dàng đạt được với chức năng chấp nhận. Tuy nhiên, tôi có thể có tối đa 20 lớp học, mỗi lớp có 30-40 đồ vật có thể kéo/vật nhỏ. Vì vậy, nếu tôi sử dụng chức năng "chấp nhận" cho điều này, thời điểm tôi chọn một thiết bị có thể kéo được, chrome của tôi bị đóng băng khi chạy thử nghiệm cho mọi vật thể có thể phân tách trên màn hình: (

Điều này có thể được giải quyết nếu tôi sử dụng 'phạm vi' Tuy nhiên, khi tôi sử dụng một phạm vi, tôi dường như không thể thực hiện khái niệm "thùng rác", vì nó chỉ có thể có một phạm vi!

Có cách nào không để vượt qua vấn đề này? Cung cấp cho các draggables nhiều hơn một phạm vi, hoặc cho các thùng rác nhiều phạm vi? Hoặc có thể một số giải pháp khác mà tôi không thể nghĩ ra?

Answer 1

Giao diện người dùng jQuery nội bộ sẽ chạy đoạn mã sau bất cứ khi nào bạn bắt đầu kéo một draggable đến d etermine mà droppable s đủ điều kiện để nhận được draggable.

var m = $.ui.ddmanager.droppables[t.options.scope] || []; 
var type = event ? event.type : null; // workaround for #2317 
var list = (t.currentItem || t.element).find(":data(droppable)").andSelf(); 

droppablesLoop: for (var i = 0; i < m.length; i++) { 

    if(m[i].options.disabled || (t && !m[i].accept.call(m[i].element[0],(t.currentItem || t.element)))) continue; //No disabled and non-accepted 
    for (var j=0; j < list.length; j++) { if(list[j] == m[i].element[0]) { m[i].proportions.height = 0; continue droppablesLoop; } }; //Filter out elements in the current dragged item 
    m[i].visible = m[i].element.css("display") != "none"; if(!m[i].visible) continue;         //If the element is not visible, continue 

    if(type == "mousedown") m[i]._activate.call(m[i], event); //Activate the droppable if used directly from draggables 

    m[i].offset = m[i].element.offset(); 
    m[i].proportions = { width: m[i].element[0].offsetWidth, height: m[i].element[0].offsetHeight }; 

} 

Như bạn có thể thấy mã không nhỏ và sẽ giải thích lý do tại sao bạn thấy hiệu suất chậm mỗi khi bạn bắt đầu kéo.

Một điều cần lưu ý là điều đầu tiên được kiểm tra trong droppablesLoop là liệu droppable có bị tắt hay không.

Do đó, để tăng hiệu suất, bạn luôn có thể vô hiệu hóa các tiện ích droppable thích hợp sẽ giúp bạn nhanh chóng thoát ra khỏi khối mã ở trên. Bạn có thể thực hiện việc này bằng cách sử dụng sự kiện start trên draggable, sự kiện này sẽ kích hoạt trước tiên.

$('.draggable').draggable({ 
    start: function() { 
     $('.invalid-droppable-elements').droppable('option', 'disabled', true); 
    }, 
    stop: function() { 
     $('.invalid-droppable-elements').droppable('option', 'disabled', false); 
    } 
}); 

này về cơ bản làm cho bạn thực hiện logic accept/scope bản thân và tác động hiệu suất lên đến thuật toán của bạn. Nó không phải là xấu để thực hiện mặc dù. Lý do các plugin chậm như chúng là vì chúng phải xử lý rất nhiều tình huống khác nhau.

Giao diện người dùng jQuery không hỗ trợ thêm nhiều phạm vi cho các thành phần riêng lẻ draggable/droppable nhưng bạn có thể tự mình cuộn chức năng đó.

Tôi đặt ví dụ cùng nhau để hiển thị điều này tại đây - http://jsfiddle.net/tj_vantoll/TgQTP/1/.