Question

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

Answer 1

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.