Javascript jquery ui-在退出键上取消拖动

我有一个可拖动的

div

s列表和一个可拖放区域。Drag-n-drop在chrome、FF和IE9中与鼠标配合良好。我想添加键盘交互

当use按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

键时，它不会恢复。所以我喜欢这个

这在合唱中很管用。但这在IE和FF中不起作用。 甚至我尝试了IE的

document.createEventObject

和

document.firevent（）

，但仍然不起作用

---

如何恢复chrome中的Dragable

div

s，IE和FF上的

esc

key？？？？？

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

---

我需要同样的功能，我拿走了你拥有的，这就是我使用的，它在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 });
        }
    });

---

此代码适用于我：

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

---

此代码适用于我：

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

这样试试

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

这样试试

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

---

如果我将

initMouseEvent

中的relatedTarget从

null

更改为

document

，FF给出了一个错误

NS\u error\u非法\u值

。如果我将

initMouseEvent

中的relatedTarget从

null

更改为

document

，是否有其他替代解决方案来实现这一点，FF给出了一个错误

NS\u error\u非法\u值

。对此有任何更新吗？是否有其他替代解决方案来实现这一点？它是一个文档记录不完整的帮助程序，jquery.ui在内部使用。所以恐怕不能保证在将来的版本中工作。工作得很漂亮。在

draggable.stop

回调中，您可以使用

event.hasOwnProperty（'originalEvent'）

来确定它是鼠标事件还是取消事件。jquery.ui在内部使用的帮助器文档记录得很差。所以恐怕不能保证在将来的版本中工作。工作得很漂亮。在

draggable.stop

回调中，您可以使用

event.hasOwnProperty（'originalEvent'）

来确定它是鼠标事件还是取消事件。我想您可以将它链接在一起

.draggable（{'revert'：true}）。trigger（'mouseup'）.draggable（“option”，{revert:false}）

而不是始终重置所有元素的可拖动选项。我想您可以将其链接在一起

。可拖动（{'revert'：true}）。触发器（'mouseup'）。可拖动（“选项”，{revert:false}）

而不是始终重置所有元素的可拖动选项。