I've a list of draggable divs and a droppable area. Drag-n-drop is working fine with mouse in chrome, FF and IE9. I want to add keyboard interaction.

The dragging div should be revert back to the list when use presses esc key. So first I did like this:

 $(document).keyup( function( e ){ e.preventDefault(); console.log(':::keypress:::',e); if( e.which=== 27 || e.keyCode === 27 ){ $( '.ui-draggable-dragging' ).draggable( 'option', 'revert', 'invalid' ).trigger( 'mouseup' ); } } );

The above code detects the esc key press but the div drops if it is over droppable area. It does not revert back on esc key press. So I did like this from here

$( document ).keyup( function( e ){ //e.preventDefault(); var mouseMoveEvent, offScreen=-50000; console.log(':::event:::',e); if( e.which=== 27 || e.keyCode === 27 ) { console.log(':::into esc keyup:::'); mouseMoveEvent = document.createEvent("MouseEvent"); offScreen = -50000; mouseMoveEvent.initMouseEvent( "mousemove", //event type : click, mousedown, mouseup, mouseover, etc. true, //canBubble true, //cancelable window, //event's AbstractView : should be window 1, // detail : Event's mouse click count offScreen, // screenX offScreen, // screenY offScreen, // clientX offScreen, // clientY false, // ctrlKey false, // altKey false, // shiftKey false, // metaKey 0, // button : 0 = click, 1 = middle button, 2 = right button null // relatedTarget : Only used with some event types (e.g. mouseover and mouseout). // In other cases, pass null. ); document.dispatchEvent(mouseMoveEvent); $( '.ui-draggable-dragging' ).draggable( 'option', 'revert', 'invalid' ).trigger( 'mouseup' ); //}else{ // if (document.createEventObject){ // mouseMoveEvent = document.createEventObject (document.event); // document.fireEvent(mouseMoveEvent); // $( '.ui-draggable-dragging' ).draggable( 'option', 'revert', 'invalid' ).trigger( 'mouseup' ); // } //}  } });

This works fine in Chorme. But this does not work in IE and FF. Even I tried withdocument.createEventObject and document.fireEvent() for IE. But still it's not working.

How do I revert back draggable divs in chrome, IE and FF on esc key ?????