Jquery UI Draggable：ヘルパーをマウスの位置に整列します。

Question

jQueryでドラッグ可能な要素があります。それは200 x 40のサイズのdivです。 もちろん、div内のさまざまな位置をクリックすることで、このdivのドラッグを開始できます。 私が望むのは、startdragイベントが発生したときに、div内のどの部分がドラッグを開始しても、ヘルパー（クローン）divは常に同じ方法でカーソルに揃えられます。

したがって、マウスの後ろのヘルパーの上端値と左端値は、マウスのxとyと同じにする必要があります。私がこのCoffeeScriptのコードを使用して試してみた：

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

    console.log(e) 

しかし、それは動作しませんし、私の推測では、私が入れた値を直接ので、マウスの動きのドラッグ可能なプラグインによって上書きされるので、これが起こっているということです。..

アイデア？

Answer 1

アマールの答えを試してみて、それが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

Answer 2

は

 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を見てみましょう、それはあなたのために、より便利になり、次のように設定してみてください。

Answer 3

私はこのために修正を見つけた、それはあなたがソート可能なプラグインを使用している場合は、このようなヘルパー位置固定することができ、非常に簡単です：これは、ためにトリックをした

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

Answer 4

を私：

appendTo： '身体' ので、同様

：

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