dragover - Web API 接口参考 编辑

当元素或者选择的文本被拖拽到一个有效的放置目标上时，触发 dragover 事件(每几百毫秒触发一次)。

这个事件在可被放置元素的节点上触发。

基本信息

是否冒泡	是
是否可以取消	是
目标对象	Document, Element
接口	DragEvent
默认行为	重置当前的拖拽动作为"none"

属性

Property	Type	Description
target 只读	EventTarget	The element that was underneath the element being dragged.
type 只读	DOMString	The type of event.
bubbles 只读	Boolean	Whether the event normally bubbles or not
cancelable 只读	Boolean	Whether the event is cancellable or not?
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	The node that had the event listener attached.
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	true if the control key was down when the event was fired. false otherwise.
shiftKey 只读	boolean	true if the shift key was down when the event was fired. false otherwise.
altKey 只读	boolean	true if the alt key was down when the event was fired. false otherwise.
metaKey 只读	boolean	true if the meta key was down when the event was fired. false otherwise.

示例：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 dragover	Living Standard
HTML 5.1 dragover	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!

• Desktop
• Mobile

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	未实现	未实现

相关

• drag
• dragstart
• dragend
• dragover
• dragenter
• dragleave
• dragexit
• drop