javascript - jquery-ui - 取消拖动退出键

Question

我有一个可拖动 div 列表和一个可放置区域。在 chrome、FF 和 IE9 中，鼠标拖放操作正常。我想添加键盘交互。

当用户按下 esc 键时，拖动的 div 应该恢复到列表。所以首先我这样做了:

        $(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开始喜欢这个

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

这在 Chorme 中运行良好。但这在 IE 和 FF 中不起作用。 我什至尝试过为 IE 使用 document.createEventObject 和 document.fireEvent()。但它仍然不起作用。

如何在 chrome、IE 和 FF 中通过 esc 键还原可拖动的 div？？？？？

Answer 1

我需要相同的功能，我采用了您拥有的功能，这就是我使用的功能，它在最新版本的 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 });
        }
    });