views:

861

answers:

1

Ok, this should be easy for the right person: Is it possible to edit the revert position of a jQuery UI draggables helper? For example, I have icons the user can click and drag into groups on the page. When the user clicks an icon and starts dragging, a helper message appears right under their cursor and follows the cursor so long as they continue to hold the click. If the helper is dropped into a group, it disappears. If the helper is not dropped into a group, it returns to it's original position using revert: 'invalid'. My question is, can I edit that original position of the helper? It appears to always revert back to the absolute position of left: 0 and top: 0 but I can't figure out how to edit these values. I need to edit the return position to be about 300px more to the left. Any help would be appreciated.

A: 

You can try repositioning the draggable element once the drag has started, when released the element will revert to the original position and then jump to the new position - I haven't figured out how to get around that, but this method works

$(document).ready(function(){
 $(".dragMe").draggable({
  helper : 'clone',
  revert : true,
  start: function(e,ui){
   // when starting the drag, reposition the element
   $(this).hide().css({ position: 'relative', left: '-300px', top: 0 });
  },
  stop: function(e,ui){
   $(this).show();
  }
 });
 $("#dropBox").droppable({
  drop: function(e, ui) {
   ui.draggable.appendTo($(this)).show()
    // reset the position of the element to zero (so it fits in the drop box)
    .css({ position: 'relative', left: 0 })
   ui.helper.remove();
  }
 });
})
fudgey