CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-draggable
Ted
Ted

Reputation: 12318

jQueryUI Drag: Ensure mouse is at center of object

I'm building an interface to a graph that allows users to drag external dots onto the graph.
I then get mouse location on drop and add a point to the graph there.

However, the dots are 35px in diameter, so it is possible to grab the dot by the corner. When that happens the dot that gets drawn on the graph is noticeably different than where the user would expect the dot to be.

I can't imagine this is the only time this has come up, Is there a simple way to ensure that the object is being drug by its center point?

Upvotes: 2

Views: 4105

Answers (3)

Shivam Tyagi
Shivam Tyagi

Reputation: 168

You can try this:

start: function(event, ui){
    $(this).draggable('instance').offset.click = {
        left: Math.floor(ui.helper.width() / 2),
        top: Math.floor(ui.helper.height() / 2)
    }; 
}

Upvotes: 1

Ted
Ted

Reputation: 12318

Turns out, it is easy, and only took writing the question to find the right words to use to search for the answer:

     $('.to_drop').draggable({ 
      cursor: 'move',
      cursorAt: { top: 17, left: 17 },
     };

Upvotes: 6

worenga
worenga

Reputation: 5856

you could set some sort of centered drag handle (see http://jqueryui.com/demos/draggable/#handle)

Upvotes: 0

Related Questions