web-dev-qa-db-ja.com

jquery UIドラッグ可能：ヘルパーをマウスの位置に揃えます

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 )

しかし、それは機能しません。私の推測では、マウスの動きにより、入力した値がドラッグ可能なプラグインによって直接上書きされるためです。

何か案は？

javascriptjquerycoffeescriptdraggable
16
Tim Baas

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

38
Dan Burton

このように設定してみてください

       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 、あなたにとってより役立つでしょう。

13
Amar

@rovervに同意します。

これでうまくいきます。

Example of my icon following the mouse cursor after scrolling the page

$('.js-tire').draggable
      tolerance: 'fit',
      appendTo: 'body',
      cursor: 'move',
      cursorAt:
        top: 15,
        left: 18
      helper: (event) ->
        $('<div class="tire-icon"></div>').append($('<img src="/images/tyre_32_32.png" />'))
      start: (event, ui) ->
        if $(event.target).hasClass 'in-use'
          $('.js-send-to-maintenance-box').addClass 'is-highlighted'
        else
          $('.ui-droppable').addClass 'is-highlighted'
      stop: (event, ui) ->
        $('.ui-droppable')
          .removeClass 'is-highlighted'
          .removeClass 'is-dragover'
0
Michelle Diniz

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

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