jquery-ui - 取消拖动转义键

Question

我列出了可拖动的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按键时恢复.所以我从这里开始喜欢这个

$( 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中不起作用.即使我尝试document.createEventObject和document.fireEvent()IE一起使用.但它仍然无法正常工作.

如何div在esc键盘上恢复chrome,IE和FF中的可拖动s ?????

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 });
        }
    });