Giao diện người dùng JQuery: Thả phần tử dài tại vị trí con trỏ thay vì phần giữa của phần tử

Question

Tôi có một số yếu tố kéo dài rất dài mà tôi có thể thả vào tất cả các ô của bảng nền.

Khi tôi bắt đầu kéo loại phần tử này, hãy di chuyển vùng chứa có thể phân đoạn của tôi (các ô của bảng của tôi), điểm "nóng" để biết phần tử sẽ bị rơi ở đâu.

Thật không may, phần giữa phần tử của tôi thường không hiển thị và không hữu ích khi thả phần tử vào đúng vị trí.

Có thể chỉ định vị trí con trỏ để chọn vùng chứa mà phần tử sẽ được thả thay vì giữa các phần tử không?

Tôi thực sự bị kẹt và tôi thực sự sẽ đánh giá cao bất kỳ trợ giúp nào.

Xin chào, đây là mã mẫu để mô tả sự cố của tôi. Div màu vàng không thể dễ dàng rơi vào các ô vì nó quá dài. jsbin.com/upunek/edit

Cảm ơn

Answer 1

Tôi nghĩ rằng những gì bạn đang tìm kiếm là tolerance. Tôi có thể sẽ đề nghị sử dụng "pointer" vì điều này sẽ sử dụng con trỏ chuột làm điểm "trùng lặp" của bạn.

http://jqueryui.com/demos/droppable/

$('[id^="cell-"]').each(function(index) { 
    $(this).droppable({ 
    accept: ".cartridge", 
    hoverClass: "cell-highlght", 
    tolerance: "pointer", 
    drop: function(event, ui) { 
    $(this).addClass("cell-dropped"); 
    } 
    }); 
}); 

http://jsbin.com/upunek/2/edit

Answer 2

Như đã đề cập bởi James Montagne, khoan dung là những gì bạn cần cho việc này. Ngày đầu đó, cho droppable bạn có thể sử dụng cursorAt. Điều này giúp bạn thiết lập các hình ảnh liên quan đến con trỏ (chỉ cần thiết nếu hình ảnh ban đầu của bạn lớn hơn clone bạn kéo)

http://api.jqueryui.com/draggable/#option-cursorAt