CODEWITHSUNDEEP
jquery-uidrag-and-drop
O'Rooney
O'Rooney

Reputation: 3090

jQueryUI - draggable with a separate click to drop

I've implemented drag and drop OK with jQueryUI draggable and droppable.

For the less savvy users, I'd like to also offer a visible "move" button. When they click this button, the element would be picked up, and when they click again on a drop target, it's dropped. So the same as drag and drop, but started with one click and dropped with another.

I know it would be possible to do this with separate code, but I'd rather not reinvent everything for a slight variation. Is there a way to get jQueryUI to do this?

The only thing I found is calling the trigger method of the draggable, but you have to pass a mousedown event...

Thanks

Upvotes: 2

Views: 815

Answers (2)

patrickmcgraw
patrickmcgraw

Reputation: 2495

See my answer on this other question. If you change it so instead of 

$("#headerDiv")
  .mousedown(function(event) {
    x = event.pageX;
    y = event.pageY;
    $(this).parent().addClass('movable');
  })
  .mouseup(function() {
    $(this).parent().removeClass('movable');
  });

bind to click and implement a toggling mechanism to decide if you are beginning the drag (mousedown equivalent) or ending the drag (mouseup equivalent) you should be most of the way there.

Upvotes: 2

Judson Terrell
Judson Terrell

Reputation: 4306

I would use .animate to animate the object to its target. I have done this before with a game. For example you could specify top and left coordinates for the element to move to onClick of the button.

Upvotes: 0

Related Questions