17

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 )

しかし、それは機能しません.マウスの動きのために、入力した値がドラッグ可能なプラグインによって直接上書きされるため、これが起こっていると思います..

何か案は？

4

5 に答える 5

39

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-25T22:53:35.263 に答える
15

このように設定してみて、

       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-05T13:38:28.810 に答える
0

これに対する修正を見つけました。非常に簡単です。ソート可能なプラグインを使用している場合は、次のようにヘルパーの位置を修正できます。

sort: function(e, ui) {
    $(".ui-sortable-handle.ui-sortable-helper").css({'top':e.pageY});
}
于 2015-01-03T01:22:26.003 に答える