jquery-ui - отмена перетаскивания на клавишу эвакуации

Question

У меня есть список перетаскиваемых div s и недоступной области. Drag-n-drop отлично работает с мышью в 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 нажатием клавиши. Так что я сделал, как это от 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() для IE. Но все же это не работает.

Как вернуть назад перетаскиваемый div s в хром, IE и FF на esc ключ ?????

Answer 1

Этот код работает для меня:

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

Answer 2

Мне нужна была такая же функциональность, я взял то, что у вас было, и это то, что я использовал, и отлично работает для меня в последней версии 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 }); 
     } 
    });