jquery-ui - 取消拖動轉義鍵

我有一個可拖動的div s和可拖放區域的列表。 Drag-n-drop在Chrome，FF和IE9中使用鼠標工作正常。我想添加鍵盤交互。jquery-ui - 取消拖動轉義鍵

拖動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

$(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()。但仍然無法正常工作。

我如何在Chrome，IE和FF恢復拖動div S於esc關鍵?????

來源

2014-01-09 Valay

如果我在'initMouseEvent'從改變relatedTarget' null'到'document'，FF給出錯誤'NS_ERROR_ILLEGAL_VALUE'。 – Valay

對此有何更新？ – Valay

是否有任何其他替代解決方案來實現此？ – Valay

此代碼的工作對我來說：

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

來源

2015-09-08 07:12:34 mar10

你能解釋一下「ddmanager」是什麼嗎？謝謝。 – jas7

這是一個記錄不完善的幫手，jquery.ui在內部使用。所以恐怕不能保證在將來的版本中工作。 – mar10

neato。精美的作品。在'draggable.stop'回調中，你可以使用'event.hasOwnProperty（'originalEvent'）'來判斷它是否是鼠標事件或取消事件。 – kritzikratzi

我需要相同的功能，我拿着你所擁有的，這是我使用的，它在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 }); 
     } 
    });

來源

2014-03-15 18:34:03

我想你可以將它們鏈接在一起'.draggable（{'revert'：true}）。trigger（'mouseup'）.draggable（「option」，{revert：false}）''而不是重置所有可拖動選項元素。 – kritzikratzi

jquery-ui - 取消拖動轉義鍵

回答

相關問題