jquery-ui - 取消在转义键上拖动 [英] jquery-ui - cancel dragging on escape key

问题描述

我有一个draggable div 的列表和一个可放置区域。 Drag-n-drop在鼠标在chrome，FF和IE9工作正常。

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.

拖动 div 应在使用时返回列表< c $ c> esc 键。所以首先我这样做：

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

上述代码检测到 esc 但如果 div 超过可放置区域，则会丢弃。它不会还原 esc 按键。所以我从这里这样做了

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

这在Chorme中正常工作。但这不工作在IE和FF。
即使我尝试使用 document.createEventObject 和 document.fireEvent（）。

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.

如何在chrome，IE和FF上恢复draggable div code> esc 键

How do I revert back draggable divs in chrome, IE and FF on esc key ?????

推荐答案

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

这篇关于jquery-ui - 取消在转义键上拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！