CODEWITHSUNDEEP
javascriptjquerycoffeescriptdraggable
Tim Baas
Tim Baas

Reputation: 6185

Jquery UI Draggable: Align helper to mouse position

With jQuery I have a draggable element. It's a div with a size of 200 x 40. Of course the user can start dragging this div by clicking at variuos positions in the div. What I want is when the startdrag event happens, the helper (clone) div will always be aligned to the cursor the same way, no matter where in the div the user started dragging.

So after the mousedown the helper's top and left values need to be the same as the mouses x and y. I've tried this using this coffeescript code:

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

    console.log( e )

But it doesn't work and my guess is that this is happening because the values I put in are directly overwritten by the draggable plugin because of mouse movement..

Any ideas?

Upvotes: 17

Views: 33490

Answers (5)

Michelle Diniz
Michelle Diniz

Reputation: 81

I Agree with @roverv.

This works fine form me.

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'

Upvotes: 0

roverv
roverv

Reputation: 89

This did the trick for me:

appendTo: 'body'

Like so:

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

Upvotes: -1

Aztrozero
Aztrozero

Reputation: 131

I've found a fix for this and it's very easy, if you are using the sortable plugin you can fix the helper position like this:

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

Upvotes: 0

Amar
Amar

Reputation: 1936

Try setting like this,

       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);
            }

Take a look at this jqFAQ.com , it will be more helpful for you.

Upvotes: 15

Dan Burton
Dan Burton

Reputation: 53715

After trying Amar's answer and realizing that it screws up interactions with droppable, I dug deeper, and found that there is an option specifically to support this called cursorAt.

$('blah').draggable
  helper: ->
    ... custom helper ...
  cursorAt:
    top: 5
    left: 5

This places the top-left corner of the helper 5 pixels above and to the left of the cursor, and interacts correctly with droppable.

http://api.jqueryui.com/draggable/#option-cursorAt

And let's give credit where credit is due. Thanks, jquery-ui mailing list archives!

https://groups.google.com/forum/#!topic/jquery-ui/Evb94G_QvNw

Upvotes: 39

Related Questions