CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
Valay
Valay

Reputation: 1999

jquery-ui - cancel dragging on escape key

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 with document.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 ?????

Upvotes: 2

Views: 3497

Answers (3)

Chen YiHao
Chen YiHao

Reputation: 329

Try this way.

$(window).keydown(function (e) {
    if (e.keyCode == 27) {
        $(document).trigger("mouseup")
    }
});

Upvotes: 1

mar10
mar10

Reputation: 14794

This code works for me:

 var ddm = $.ui.ddmanager.current;
 if ( ddm ) {
     ddm.cancel();
 }

Upvotes: 4

Trevor Orr
Trevor Orr

Reputation: 947

I needed the same functionality, I took what you had and this is what I used and it works perfectly for me in the latest version of IE, FireFox and Chrome.

Handle ESC key

$( document ).keyup( function( e ) {
    if( e.which=== 27 || e.keyCode === 27 ) {
        $( '.ui-draggable-dragging' ).draggable({'revert': true }).trigger( 'mouseup' );
    }
});

I Added this to my draggable elements

    $(".draggable-design-part").draggable({
        containment: "parent",
        scroll: true, 
        scrollSensitivity: 100,
        scrollSpeed: 100,
        snap: true,
        stop: function() {
            // Set all draggable parts back to revert: false
            // This fixes elements after drag was cancelled with ESC key
            $(".draggable-design-part").draggable("option", {revert: false });
        }
    });

Upvotes: 6

Related Questions