I am looking for a way to allow a user to cancel a mouse drag operation by pressing the ESC key.

Can this be done using Javascript?

Thank you

Update

When the mouse is dragging a div element over a droppable area, pressing the ESC key should drag the element to an area that is not droppable. Once the element is dragged to a non-droppable area, I invoke a "mouseup" event on the dragged element, which causes the dragged element to be dropped onto a non-droppable area.

How can I do this using jQuery Draggable and jQuery Droppable?

I am looking for a way to allow a user to cancel a mouse drag operation by pressing the ESC key.

Can this be done using Javascript?

Thank you

Update

When the mouse is dragging a div element over a droppable area, pressing the ESC key should drag the element to an area that is not droppable. Once the element is dragged to a non-droppable area, I invoke a "mouseup" event on the dragged element, which causes the dragged element to be dropped onto a non-droppable area.

How can I do this using jQuery Draggable and jQuery Droppable?

• javascript
• jquery
• html
• jquery-ui

• 1 Native drag and drop or jQuery's draggable? The native drag event is cancelable, jQuery's drag event may be by returning false (the docs do not specifically say so but returning false usually cancels an event; try it). – Sverri M. Olsen Commented Oct 26, 2015 at 6:06
• Okay, according to this post returning false should cancel the drag event. – Sverri M. Olsen Commented Oct 26, 2015 at 6:12
• I would like to use jQuery's draggable. – jas7 Commented Oct 28, 2015 at 2:21
• Try this see if this helps your problem stackoverflow./questions/21012655/… – user5365803 Commented Nov 5, 2015 at 15:46

2 Answers 2

When the mouse is dragging a div element over a droppable area, pressing the ESC key should drag the element to an area that is not droppable

I´ve created a demo of a possible solution that you can check in plunker.

As stated by @ioneyed, you can select the dragged element directly using the selector .ui-draggable-dragging, which should be more efficient if you have lots of draggable elements.

The code used is the following, however, apparently it's not working in the snippet section. Use the fullscreen feature on the plunker or reproduce it locally.

var CANCELLED_CLASS = 'cancelled';

$(function() {

  $(".draggable").draggable({

    revert: function() {

      // if element has the flag, remove the flag and revert the drop
      if (this.hasClass(CANCELLED_CLASS)) {
        this.removeClass(CANCELLED_CLASS);
        return true;
      }

      return false;

    }

  });

  $("#droppable").droppable();

});

function cancelDrag(e) {

  if (e.keyCode != 27) return; // ESC = 27

  $('.draggable') // get all draggable elements
    .filter('.ui-draggable-dragging') // filter to remove the ones not being dragged
    .addClass(CANCELLED_CLASS) // flag the element for a revert
    .trigger('mouseup'); // trigger the mouseup to emulate the drop & force the revert

}

$(document).on('keyup', cancelDrag);

        .draggable {
          padding: 10px;
          margin: 10px;
          display: inline-block;
        }
        #droppable {
          padding: 25px;
          margin: 10px;
          display: inline-block;
        }

<div id="droppable" class="ui-widget-header">
  <p>droppable</p>
</div>

<div class="ui-widget-content draggable">
  <p>draggable</p>
</div>

<div class="ui-widget-content draggable">
  <p>draggable</p>
</div>

<div class="ui-widget-content draggable">
  <p>draggable</p>
</div>

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">

I tried to help but without the expected result... Searching on google you can find that while dragging other events are locked, similar behaviour to what happens during a window.alert...

By the way, I am on a Mac and I can capture all keyboard events but not "controls key such as mand, ctrl, esc, ecc."

Hope help you as a starter point!

function DragAndDropCtrl($) {
  var self = this;
  
  self.ESC = 27;
  self.draggables = $('.draggable');
  self.dropArea = $('#droppable');
  self.currentDraggingElement = null;
  self.currentDismissed = false;

  self.dismissDragging = function(event, eventManager) {
    
    self.currentDismissed = true;
    
    //Using the manager you can't use the revert function OMG!
    //return eventManager.cancel();
  };
  
  self.dropArea.droppable();
  self.draggables.draggable({
    revert: function() {
      var revert = self.currentDismissed;
      
      self.currentDismissed = false;
      console.log(revert, self.currentDismissed)
      
      return revert;
    },
    start: function() {
      self.currentDraggingElement = $(this);
    },
    end: function() {
      self.currentDraggingElement = null;
    }
    
  });
  
  $(document).keypress(function(event) {
    
    console.log('key pressed', event)
    
    //How to intercept the esc keypress?
    self.dismissDragging(event, $.ui.ddmanager.current);
    
    if(event.which  === self.ESC || event.keyCode  === self.ESC) {
      self.dismissDragging(event, $.ui.ddmanager.current);
    }
  });
}

jQuery(document).ready(DragAndDropCtrl);

#droppable {
  border: 1px solid #ddd;
  background: lightseagreen;
  text-align: center;
  line-height: 200px;
  margin: 1em .3em;
}

.draggable {
  border: 1px solid #ddd;
  display: inline-block;
  width: 100%;
  margin: .5em 0;
  padding: 1em 2em;
  cursor: move;
}

.sidebar { width: 30%; float: left; }
.main { width: 70%; float: right; }
* { box-sizing: border-box; }

<div class="sidebar">
  <div class="ui-widget-content draggable">
    <p>draggable</p>
  </div>
  <div class="ui-widget-content draggable">
    <p>draggable</p>
  </div>

  <div class="ui-widget-content draggable">
    <p>draggable</p>
  </div>
</div>


<div class="main">  
  <div id="droppable" class="ui-widget-header">
    <p>droppable</p>
  </div>
</div>



<script src="https://cdnjs.cloudflare./ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">