JQuery UI Draggable: выровнять помощник по отношению к мыши

С jQuery у меня есть элемент перетаскивания. Это div размером 200 x 40. Конечно, пользователь может начать перетаскивать этот div, нажимая на различные позиции в div. Я хочу, когда произойдет событие startdrag, вспомогательный (клон) div всегда будет выровнен по курсу таким же образом, независимо от того, где в div пользователь начал перетаскивать.

Итак, после мышки верхние и левые значения помощника должны быть такими же, как и мыши x и y. Я пробовал это, используя этот код coffeescript:

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

    console.log( e )

Но это не работает, и я предполагаю, что это происходит, потому что значения, которые я вставляю, напрямую перезаписываются плагином перетаскивания из-за перемещения мыши.

Любые идеи?

Ответ 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

Ответ 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, это будет более полезно для вас.

Ответ 3

Я нашел исправление для этого, и это очень просто, если вы используете сортируемый плагин, вы можете зафиксировать положение помощника следующим образом:

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

Ответ 4

Я согласен с @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'

Ответ 5

Это сделало трюк для меня:

appendTo: 'body'

Так же:

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