Jquery UI Draggable：將幫助器對齊鼠標位置

使用jQuery我有一個可拖動的元素。這是一個大小爲200 x 40的div。當然，用戶可以通過單擊div中的variuos位置來開始拖動該div。我想要的是，當startdrag事件發生時，無論用戶在哪裏開始拖動，輔助（克隆）div將始終以相同的方式與光標對齊。Jquery UI Draggable：將幫助器對齊鼠標位置

所以在mousedown之後，幫手的頂部和左邊的值需要與鼠標x和y相同。我試過這個使用此代碼的CoffeeScript：

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

    console.log(e)

但它不工作，我的猜測是，這種情況正在發生，因爲我把這些值直接因鼠標移動的可拖動的插件覆蓋..

任何想法？

來源

2012-11-05 Tim Baas

你應該設置一個jsfiddle讓我們看看發生了什麼 –

在嘗試了Amar的回答並意識到它將與droppable的交互關聯後，我挖得更深，並且發現有一個選項專門用於支持這個被稱爲cursorAt的選項。

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

這會將幫助5個像素以上，並光標左邊的左上角，並與droppable正確交互。

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

而且，我們給予信貸，信貸到期。謝謝，jquery-ui郵件列表存檔！

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

來源

2013-09-25 22:53:35

你是完全正確的！（http://jsfiddle.net/vLmN5/），這種內置方法比在啓動函數中自己做的更好。 –

謝謝，你是一個救生員！ – Abraham

我不能夠感謝你。這個幫手元素的定位讓我很長時間都在困擾着我。謝謝！ – hyde

嘗試設置這樣的，

 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); 
      }

在這個jqFAQ.com看看，這將是對你更有幫助。

來源

2012-11-05 13:38:28 Amar

幾乎！但是margin-left/top代替left/top做了這個工作。下面是它的工作原理：'marginLeft：e.clientX - $（e.target）.offset（）。left'和'marginTop：e .clientY - $（e.target）.offset（）。top' ..如果你可以編輯你的文章，我接受它..謝謝！ –

-1這與'droppable'的互動性差。 –

我已經找到了解決這個，這是非常容易的，如果你正在使用排序插件，你可以解決這樣的幫手位置：

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

來源

2015-01-03 01:22:26 Aztrozero

-1

該做的把戲我：

appendTo： '身體'

像這樣：

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

來源

2017-01-10 09:09:32 roverv

Jquery UI Draggable：將幫助器對齊鼠標位置

回答

相關問題