JqueryUI, kéo các phần tử vào các ô của div di chuyển có thể chia nhỏ chứa bảng lớn

Question

Tôi đang gặp phải sự cố kéo/thả.

Tôi muốn luôn xem phần tử đang kéo và tôi muốn có thể cuộn một div cụ thể để thả phần tử vào bất kỳ ô nào trong bảng của tôi. Tôi cũng muốn có thể kéo phần tử từ bất kỳ div nào vào bất kỳ div nào.

Ví dụ này hoạt động gần như tốt. Vấn đề cuối cùng của tôi là về thuộc tính ô hoverClass: khi tôi kéo phần tử từ "vùng chứa A" gần đường viền của "vùng chứa B", tôi đã triển khai hành vi cuộn tự động để điều hướng trong bảng của mình để tiếp cận bất kỳ ô nào. Tuy nhiên, sau khi mô phỏng cuộn, hoverClass không áp dụng cho ô bên phải. Tuy nhiên, phần tử luôn bị rơi vào ô bên phải.

https://jsfiddle.net/Bouillou/QvRjL/434/

Cách tiếp cận của tôi có đúng không?

EDIT

Tôi tìm thấy một workaround. Ý tưởng là chắp thêm phần tử nhân bản vào thùng chứa có thể cuộn trong khi gọi lại trong trình trợ giúp xây dựng, sau đó nối thêm trình trợ giúp cho cơ thể bằng hàm setTimeout sau 1ms. Vị trí helper phải được ánh xạ trên vị trí chuột để tránh vấn đề bù đắp.

Dưới đây là giải pháp cuối cùng của tôi: https://jsfiddle.net/Bouillou/QvRjL/434/

Tôi chắc chắn rằng nó có thể phát triển một cách tốt nhất để làm điều đó.

Answer 1

Rõ ràng bản cập nhật của tôi là giải pháp duy nhất.

Nó đang hoạt động trong nhiều tháng mà không gặp vấn đề gì.

Tôi đã tìm thấy giải pháp thay thế. Ý tưởng là để chắp thêm phần tử nhân bản vào thùng chứa có thể cuộn định kỳ gọi lại gọi lại của trình trợ giúp, sau đó nối thêm trình trợ giúp cho cơ thể bằng cách sử dụng hàm setTimeout sau 1ms. Vị trí helper phải được ánh xạ trên vị trí chuột để tránh vấn đề bù đắp.

Đây là giải pháp của tôi: http://jsfiddle.net/QvRjL/134/

$('[id^="drag-"]').each(function() { 
    $(this).draggable({ 
     opacity: 0.7, 
     cursorAt: { top: 15, left: 50 }, 
     appendTo: 'body', 
     containment: 'body',   
     scroll: true, 
     helper: function(){ 
      //Hack to append the cartridge to the body (visible above others divs), 
      //but still bellonging to the scrollable container 
      $('#container').append('<div id="clone" class="cartridge">' + $(this).html() + '</div>'); 
      $("#clone").hide(); 
      setTimeout(function(){ 
       $('#clone').appendTo('body'); 
       $("#clone").show(); 
      },1); 
      return $("#clone"); 
     }  
    }); 
});​ 

Answer 2

Nếu tôi đã hiểu một cách chính xác, sau khi bạn di chuyển, các highlitedcells không phải là một trong những quyền ..

Dường như với tôi rằng nó calcualtes tế bào để làm nổi bật từ yếu tố container của bạn, nhưng sau đó sao chép de vị trí bên trong phần tử bảng.

Cơ sở, nó kiểm tra độ lệch của chuột từ 'vùng chứa2' và sau đó nâng cao ô ở vị trí bù trừ nhưng từ vị trí bảng 't'.

Mất cơ hội và sử dụng vị trí thay vì bù trừ. và được đề cập trên http://api.jquery.com/offset/,

Phương pháp .offset() cho phép chúng tôi truy lục vị trí hiện tại của phần tử liên quan đến tài liệu. Tương phản điều này với .position(), để truy lục vị trí hiện tại liên quan đến cha mẹ bị lệch.

Personnaly tôi sẽ chỉ áp dụng một lớp css cho các ô và sử dụng css: hover./EDIT: nếu lý do duy nhất bạn cần làm đó là để làm nổi bật các tế bào .. có thể bạn muốn kích hoạt một số công cụ khác quá.