Javascript 使用ESC事件取消拖放

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

这可以用Javascript实现吗

多谢各位

更新

当鼠标在可拖放区域上拖动div元素时，按ESC键应将该元素拖动到不可拖放的区域。一旦元素被拖到一个不可拖放的区域，我就在被拖的元素上调用mouseup事件，这会导致被拖的元素被拖到一个不可拖放的区域

如何使用jquerydraggable和jquerydroptable实现这一点

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

我已经创建了一个可能的解决方案，您可以在plunker中进行检查

如所述，您可以直接使用selector.ui draggable拖动来选择拖动的元素，如果您有很多可拖动的元素，那么这应该会更有效

不过，使用的代码如下所示，显然它在代码段中不起作用。在plunker上使用全屏功能或在本地复制

var CANCELLED_CLASS=‘CANCELLED’； $function{ $.draggable.draggable{ 还原：函数{ //如果元素具有该标志，请移除该标志并恢复拖放 如果此.hasclass取消了\u类{ 此.removeclass\u类； 返回true； } 返回false； } }; $droppable.droppable； }; 函数取消拖动{ 如果e.keyCode！=27返回；//ESC=27 $'.draggable'//获取所有可拖动元素 .filter'.ui draggable dragging'//筛选以删除未被拖动的对象 .addClassCANCELLED\u CLASS//标记元素以进行还原 .trigger'mouseup'；//触发mouseup以模拟放置并强制还原 } $document.on'keyup'，cancelDrag； .拖拉{ 填充：10px； 利润率：10px； 显示：内联块； } 可降落{ 填充：25px； 利润率：10px； 显示：内联块； } 可降落

拖拉的

拖拉的

拖拉的

---

我试图帮忙，但没有达到预期的效果。。。 在谷歌上搜索时，你会发现，当拖动其他事件时，它们会被锁定，类似于在窗口中发生的行为

顺便说一句，我在Mac电脑上，我可以捕获所有键盘事件，但不能捕获诸如command、ctrl、esc、ecc等控制键

希望能帮助你作为起点

函数DragAndDropCtrl${ var self=这个； self.ESC=27； self.draggables=$'.draggable'； self.dropArea=$'droppable'； self.currentDraggingElement=null； self.current=false； self.dismissdrading=functionevent，eventManager{ self.current=true； //使用管理器时，不能使用还原功能OMG！ //返回eventManager.cancel； }; self.dropArea.droppable； self.draggable.draggable{ 还原：函数{ var revert=自修复； self.current=false； console.logrevert，self.current 返回还原； }, 开始：功能{ self.currentDraggingElement=$this； }, 完:功能{ self.currentDraggingElement=null； } }; $document.keypressfunctionevent{ 控制台。记录“按键按下”，事件 //如何拦截esc按键？ self.dismissDraggingevent，$.ui.ddmanager.current； ifevent.which==self.ESC | | event.keyCode==self.ESC{ self.dismissDraggingevent，$.ui.ddmanager.current； } }; } jQuerydocument.readyDragAndDropCtrl； 可降落{ 边框：1px实心ddd； 背景：轻海绿色； 文本对齐：居中； 线高：200px； 边缘：1米3米； } .拖拉{ 边框：1px实心ddd； 显示：内联块； 宽度：100%； 边缘：.5em0； 填料：1米2米； 光标：移动； } .侧边栏{宽度：30%；浮动：左；} .main{width:70%；float:right；} *{框大小：边框框；} 拖拉的

拖拉的

拖拉的

可降落

---

或本机拖动事件是可取消的，jQuery的拖动事件可能是通过返回false来实现的。文档没有明确说明这一点，但返回false通常会取消一个事件；试试看。好的，根据返回的false，应该取消拖动事件。我想使用jQuery的Dragable。试试看这是否有助于解决问题。为什么要使用.ui Dragable拖动进行筛选，而不是将其作为初始选择器或进行子选择$'.ui Dragable拖动'，'.Dragable'？您的代码不起作用。假设我将可拖动的元素拖到可拖放的元素上。当我按下ESE键时，不应将可拖动元素放置在可拖放元素上。但是，您提供的解决方案允许在

---

按下ESC键。他的解决方案是您要求的，但您没有声明希望保留取消。另外，这是对draggable的一个简单的附加，可以让它查找已取消的类并忽略draggable状态。取消：。在可拖动声明中已取消。当按下ESC键时，我要求将元素拖放到不可拖放元素上。什么不可拖放元素？因为您没有提供HTML，所以我简单地恢复了拖动，但从那里很容易完成。