Giao diện người dùng JQuery chụp vào lưới trong phần tử

Question

Tôi có hai div và tôi đang sử dụng thư viện JQueryUI để thả một div vào một phần tử khác.

Tôi muốn chụp div có thể kéo vào lưới trong div thả thay vì lưới trên toàn bộ trang. Tôi đã tìm thấy thuộc tính snap để snap vào phần tử drop, tôi cũng tìm thấy thuộc tính grid để snap nó vào một lưới nhưng có cách nào để kết hợp cả hai?

$("#draggable").draggable({ grid: [ 50, 50 ] }); 

Cách duy nhất khác mà tôi có thể nghĩ đến là điền div thả với nhiều div chụp nhỏ hơn là cách tiếp cận tôi không thích!

Answer 1

Bạn có thể sử dụng các phương thức vượt qua và có thể phân tách để phát hiện khi nào khả năng kéo qua, và sau đó chỉ thực hiện tham số lưới tại điểm đó.

$("#draggable").draggable(); 
$("#snaptarget").droppable({ 
    over: function(event, ui) { 
     $("#draggable").draggable({ 
      grid: [50, 50] 
     }); 
    }, 
    out: function(event, ui) { 
     $("#draggable").draggable("option", "grid", false); 
    } 
});​ 

jsFiddle example.