Question

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

可以使用Javascript完成吗？

谢谢

更新

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

我怎样才能使用jQuery Draggable和jQuery Droppable？

Answer 1

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

我已经创建了demo可能的解决方案，您可以在plunker中查看。

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

使用的代码如下，但显然它在代码段中不起作用。使用plunker上的fullscreen功能或在本地重现。

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">

Answer 2

我试图帮助但没有预期的结果...... 在Google上搜索您可以找到同时拖动其他事件被锁定，与 window.alert 期间发生的行为类似......

顺便说一下，我在Mac上，我可以捕获所有键盘事件但不能“控制键，如命令，ctrl，esc，ecc。”

希望帮助你作为起点！

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.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">

使用ESC事件取消拖放

2 个答案: