使用ESC事件取消拖放

Question

我正在寻找一种方法,允许用户通过按ESC键取消鼠标拖动操作.

可以使用Javascript完成吗？

谢谢

更新

当鼠标在可放置区域上拖动div元素时,按ESC键应将元素拖动到不可放置的区域.将元素拖动到不可放置的区域后,我会在拖动的元素上调用"mouseup"事件,这会导致拖动的元素被拖放到不可放置的区域.

我怎么能用jQuery Draggable和jQuery Droppable做到这一点？

Answer 1

当鼠标在可放置区域上拖动div元素时,按ESC键会将元素拖动到不可放置的区域

我创建了demo一个可以在plunker中检查的可能解决方案.

如上所述@ioneyed,您可以使用选择器直接选择拖动元素.ui-draggable-dragging,如果您有许多可拖动元素,则应该更有效.

使用的代码如下,但显然它不适用于代码段.使用fullscreenplunker上的功能或在本地重现它.

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