jquery-ui - 取消拖动转义键

我有一个可拖动的列表divs 和一个可放置区域。在 chrome、FF 和 IE9 中，鼠标拖放功能运行良好。我想添加键盘交互。

拖拽div使用按键时应恢复到列表esc钥匙。所以首先我这样做了：

        $(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' );                            
                    }                 
        } );

上面的代码检测到esc按键但div如果超出可投放区域，则会掉落。它不会恢复esc按键。所以我确实喜欢这个here http://forum.jquery.com/topic/how-to-cancel-drag-while-dragging

$( 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' );
                    // }
                //}                
              }
            });

这在 Chrome 中运行良好。但这在IE和FF中不起作用。 即使我尝试过document.createEventObject and document.fireEvent()对于IE。但它仍然不起作用。

如何恢复可拖动divs 在 chrome、IE 和 FF 上esc钥匙 ？？？？？

我需要相同的功能，我采用了您所拥有的功能，这就是我使用的功能，它在最新版本的 IE、FireFox 和 Chrome 中非常适合我。

手柄ESC键

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

我将其添加到我的可拖动元素中

    $(".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 });
        }
    });