Giao diện người dùng Jquery Có thể kéo được: Căn chỉnh trợ giúp đến vị trí chuột

Question

Với jQuery Tôi có một phần tử có thể kéo được. Đó là một div có kích thước 200 x 40. Tất nhiên người dùng có thể bắt đầu kéo div này bằng cách nhấp vào vị trí variuos trong div. Điều tôi muốn là khi sự kiện startdrag xảy ra, div trợ giúp (bản sao) div sẽ luôn được căn chỉnh cho con trỏ theo cùng một cách, bất kể vị trí div người dùng bắt đầu kéo.

Vì vậy, sau khi mousedown, giá trị trên cùng và bên trái của trình trợ giúp cần phải giống với số chuột x và y. Tôi đã thử này sử dụng mã coffeescript này:

onStartDrag: (e, ui) => 
    ui.helper.css 
     left: e.clientX 
     top: e.clientY 

    console.log(e) 

Nhưng nó không hoạt động và tôi đoán là điều này xảy ra vì các giá trị tôi đặt tại được ghi đè trực tiếp bởi các plugin kéo vì di chuyển chuột ..

Bất kỳ ý tưởng nào?

Answer 1

Sau khi thử câu trả lời của Amar và nhận ra rằng nó tương tác với droppable, tôi đào sâu hơn và thấy rằng có một tùy chọn đặc biệt để hỗ trợ điều này được gọi là cursorAt.

$('blah').draggable 
    helper: -> 
    ... custom helper ... 
    cursorAt: 
    top: 5 
    left: 5 

này đặt góc trên cùng bên trái của helper 5 pixel trên và bên trái của con trỏ, và tương tác một cách chính xác với droppable.

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

Và chúng ta hãy cung cấp tín dụng mà tín dụng là do. Cảm ơn, jquery-ui lưu trữ danh sách gửi thư!

https://groups.google.com/forum/#!topic/jquery-ui/Evb94G_QvNw

Answer 2

Cố gắng thiết lập như thế này,

 start: function (event, ui) { 
       $(ui.helper).css("margin-left", event.clientX - $(event.target).offset().left); 
       $(ui.helper).css("margin-top", event.clientY - $(event.target).offset().top); 
      } 

Hãy xem jqFAQ.com này, nó sẽ rất hữu ích hơn cho bạn.

Answer 3

Tôi đã tìm thấy một sửa chữa cho điều này và nó rất dễ dàng, nếu bạn đang sử dụng các plugin sắp xếp được, bạn có thể sửa chữa các vị trí helper như thế này:

sort: function(e, ui) { 
    $(".ui-sortable-handle.ui-sortable-helper").css({'top':e.pageY}); 
} 

Answer 4

này đã làm các trick cho tôi:

appendTo: 'body'

Giống như vậy:

$(this).draggable({ 
    helper: "clone", 
    cursor: "move", 
    appendTo: 'body' 
});