dragend

拖放事件在拖放操作结束时触发(通过释放鼠标按钮或单击escape键)。

基本信息

Bubbles Yes
Cancelable No
Target objects Document, Element
Interface DragEvent
Default Action Varies.

属性

Property Type Description
target 只读 EventTarget The element that was underneath the element being dragged.
type 只读 DOMString 事件类型。
bubbles 只读 Boolean 是否允许冒泡
cancelable 只读 Boolean 默认行为是否可以取消
view 只读 WindowProxy document.defaultView (window of the document)
detail 只读 long (float) 0.
dataTransfer DataTransfer The data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
currentTarget 只读 EventTarget 绑定事件监听的DOM结点
relatedTarget 只读 EventTarget For mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX 只读 long The X coordinate of the mouse pointer in global (screen) coordinates.
screenY 只读 long The Y coordinate of the mouse pointer in global (screen) coordinates.
clientX 只读 long The X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY 只读 long The Y coordinate of the mouse pointer in local (DOM content) coordinates.
button 只读 unsigned short The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons 只读 unsigned short The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure 只读 float The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey 只读 boolean

当事件触发的时候，如果Ctrl键是按下的，这个值就是true,否则就是false
shiftKey 只读 boolean

当事件触发的时候，如果Shift键是按下的，这个值就是true,否则就是false
altKey 只读 boolean 当事件触发的时候，如果Alt键是按下的，这个值就是true,否则就是false
metaKey 只读 boolean 当事件触发的时候，如果Meta键是按下的，这个值就是true,否则就是false

示例：dropzone

HTML 内容

<div class="dropzone">
    <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
        This div is draggable
    </div>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>

CSS 内容

  #draggable {
    width: 200px;
    height: 20px;
    text-align: center;
    background: white;
  }

  .dropzone {
    width: 200px;
    height: 20px;
    background: blueviolet;
    margin-bottom: 10px;
    padding: 10px;
  }

JavaScript 内容

  var dragged;

  /* 可拖动的目标元素会触发事件 */
  document.addEventListener("drag", function( event ) {

  }, false);

  document.addEventListener("dragstart", function( event ) {
      // 保存拖动元素的引用(ref.)
      dragged = event.target;
      // 使其半透明
      event.target.style.opacity = .5;
  }, false);

  document.addEventListener("dragend", function( event ) {
      // 重置透明度
      event.target.style.opacity = "";
  }, false);

  /* 放下目标节点时触发事件 */
  document.addEventListener("dragover", function( event ) {
      // 阻止默认动作
      event.preventDefault();
  }, false);

  document.addEventListener("dragenter", function( event ) {
      // 当可拖动的元素进入可放置的目标高亮目标节点
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "purple";
      }

  }, false);

  document.addEventListener("dragleave", function( event ) {
      // 当拖动元素离开可放置目标节点，重置其背景
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
      }

  }, false);

  document.addEventListener("drop", function( event ) {
      // 阻止默认动作（如打开一些元素的链接）
      event.preventDefault();
      // 移动拖动的元素到所选择的放置目标节点
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
          dragged.parentNode.removeChild( dragged );
          event.target.appendChild( dragged );
      }
    
  }, false);

规范

Specification Status Comment
HTML Living Standard
dragend		 Living Standard  
HTML 5.1
dragend		 Recommendation Initial definition

浏览器支持

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 4 3.5 (1.9.1)[1] 10 12 3.1
Feature Android Android Webview Chrome for Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile
Basic support 未实现 未实现 未实现 未实现 未实现 10 未实现 未实现

[1] In Gecko, dragend is not dispatched if the source node is moved or removed during the drag (e.g. on drop or dragover). See bug 460801.

相关