Disable drag and drop when Shift key is pressed

Question

I have an image that I customized using the jQuery UI that you can drag and drop. This works great, but now I would like to be able to drag around the image to draw a rectangle in the image and not move. Therefore, if the Shift key is held down, I do not want to do drag and drop.

I tried to put

if(e.shiftKey)return; 

at the top of the drag_start, dragging, and drag_stop functions, but it doesn’t do anything, because the drag and drop operation seems to be performed inside the jQuery UI, and the drag_start, drag and drop and drag_stop calls are just courtesy calls letting you know what jQueryUI does .

Is there a way to disable drag and drop while holding the Shift key?

thanks

(For more information about this, see my "answer" below using jsfiddle.)

Answer 1

How about in start_drag if the shift key and then return false; (do not start drag and drop)

 function box_start_drag(e, ui) { if(e.shiftKey) return false; } 

Fiddle

Or stop dragging at any time shift . Put return false in the drag method as Dom suggests in the comments below.

Answer 2

I am sure that this is how it is done, but I have not tested it. You need a key listener, and you can place it everywhere, on the element you are dragging, or on the body as a whole. Then, when you press the shift key, it will turn the switch on or off.

 var shift=false; $("body").keydown(function(e){ if(e.shiftKey){ shift=true; } }).keyup(function(e){ if(e.shiftKey && shift){ shift=false; } }); $("#draggable").draggable({ drag:function(e){ if(shift){ return; } } }); 

One of the problems is that if the shift key is released, I believe that you will drag anyway ... Again, this is not tested, but should be started.

Answer 3

I thought the solution might be to have the drag handler continue to set the position to its original position if Shift was held. The js fiddle here - http://jsfiddle.net/26Gf4/ - is trying to do this, with the image being replaced with a div to make things easier, but that doesn't work. The .log console says that the window returns to its original position each time you drag and drop, but the window continues to move using drag and drop. The same reset code in the box_stop_drag () handler works fine.

 var drag_startPosition; var box_dragOps = { start : box_start_drag, drag : box_dragging, stop : box_stop_drag }; $('#box').draggable(box_dragOps); function box_start_drag(e, ui) { drag_startPosition = ui.position; } function box_dragging(e,ui) { if(e.shiftKey) { ui.helper.css({'top':drag_startPosition.top, 'left':drag_startPosition.left}); console.log("box_dragging: setting position back to top="+drag_startPosition.top+" left="+drag_startPosition.left); return; } } function box_stop_drag(e, ui) { ui.helper.css({'top':drag_startPosition.top, 'left':drag_startPosition.left}); console.log("box_stop_drag: setting position back to top="+drag_startPosition.top+" left="+drag_startPosition.left); return; }