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 )
しかし、それは機能しません。私の推測では、マウスの動きにより、入力した値がドラッグ可能なプラグインによって直接上書きされるためです。
何か案は?
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
このように設定してみてください
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 、あなたにとってより役立つでしょう。
@rovervに同意します。
これでうまくいきます。
$('.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'
私はこれに対する修正を見つけました、そしてそれは非常に簡単です、もしあなたがソート可能なプラグインを使用しているなら、あなたはこのようにヘルパーの位置を修正することができます:
sort: function(e, ui) {
$(".ui-sortable-handle.ui-sortable-helper").css({'top':e.pageY});
}