在html中没有发生删除操作时会触发哪个事件？

Question

我希望在我的放弃操作失败时捕获事件，因为用户没有放在正确的位置，或者可能是他自己已经通过点击“Esc”键取消了它。

Answer 1

看看这个脚本。花了我一些时间来写和完成它。 =＆GT; 的 DEMO

如果这是你想要的，请告诉我。

注意：=＆gt; 此代码与旧版（没有HTML5支持的浏览器）浏览器（例如IE8等）不兼容

1. 首先，我们通过将draggable属性设置为true来定义我们的可拖动元素

   <div id="draggable" draggable="true"> Drag this div </div>

2. 然后我们定义dropzone (target:where the element should be dropped on)

   <div class="dropzone" id="dropzone">Dropzone</div>

3. 我们需要在释放元素时获取鼠标的坐标，因此我们知道鼠标是否已在dropzone上释放（我已放置alert显示dragend上是否发生dropzone事件的通知。如果dropzone上的事件发出 dropped on the dropzone ，则会提醒 dropped not on the dropzone ）

   function cords(event)

4. 我们还需要获取dropzone元素的坐标，这样我们就能找到drop事件的位置（成功与否（*手动取消）{{1} }）或掉在错误的地方））发生了。

   Esc

   var elTop = dragZone.getBoundingClientRect().top + getDocTopLeftPos().fT;

   var elLeft = dragZone.getBoundingClientRect().left;

   var elBottom = elTop + parseInt(getElProps(dragZone,'height'));

5. 我们将通过var elRight = elLeft + parseInt(getElProps(dragZone,'width'));活动了解drag操作是否成功

<强> HTML

(on)dragend

<强> CSS

  <div id="draggable" draggable="true">
   Drag this div
  </div>

  <div class="dropzone" id="dropzone">Dropzone</div>

<强>的Javascript

  #draggable {

    width: 200px;
    height: 50px;
    text-align: center;
    background: red;
    margin-bottom:50px;

  }

  .dropzone {

    width: 200px;
    height: 200px;
    background: brown;
    margin-bottom: 10px;
    padding: 10px;
    text-align:center

  }