dragenter

当拖动的元素或被选择的文本进入有效的放置目标时， dragenter 事件被触发。

基本信息

是否冒泡 是
是否可取消 是
目标对象 用户指定的元素或者body元素
接口 DragEvent
默认动作 取消拖动

属性

属性 类型 描述
target 只读 EventTarget 被拖动的元素下面的元素。
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 触发事件的元素
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 全局（屏幕）坐标中鼠标指针的X坐标。
screenY 只读 long 全局（屏幕）坐标中鼠标指针的Y坐标。
clientX 只读 long 本地（DOM内容）坐标中鼠标指针的X坐标。
clientY 只读 long 本地（DOM内容）坐标中鼠标指针的Y坐标。
button 只读 unsigned short 鼠标事件触发时按下的按钮号：左键= 0，中键= 1（如果存在），右键= 2。 对于配置为左手使用的鼠标，其中按钮操作反转，则值从右向左读取。
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 触发事件时屏幕的压力值, 介于0.0到1.0之间
ctrlKey 只读 boolean 事件触发时ctrl键是否被按下
shiftKey 只读 boolean 事件触发时shift键是否被按下
altKey 只读 boolean 事件触发时alt键是否被按下
metaKey 只读 boolean 事件触发时meta键是否被按下

示例：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
dragenter		 Living Standard  
HTML 5.1
dragenter		 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) 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 未实现 未实现

相关