--- title: drag slug: Web/API/Document/drag_event tags: - DOM - Event - drag and drop - 事件 - 参考 - 拖动 translation_of: Web/API/Document/drag_event ---
{{APIRef}}

当元素或者选择的文本被拖动时触发 drag 事件 (每几百毫秒).

基本信息

是否冒泡 是
是否可以取消 是
目标对象 {{domxref("Document")}}, {{domxref("Element")}}
接口 {{domxref("DragEvent")}}
默认行为 Continue the drag & drop operation.

属性

Property Type Description
target {{readonlyInline}} EventTarget 被拖动元素下方的元素
type {{readonlyInline}} DOMString 事件类型
bubbles {{readonlyInline}} Boolean 事件是否冒泡
cancelable {{readonlyInline}} Boolean 该事件是否可以被取消
view {{readonlyInline}} WindowProxy document.defaultView (window of the document)
detail {{readonlyInline}} long (float) 0.
dataTransfer DataTransfer The data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
currentTarget {{readonlyInline}} EventTarget The node that had the event listener attached.
relatedTarget {{readonlyInline}} 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 {{readonlyInline}} long The X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}} long The Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}} long The X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}} long The Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}} 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 {{readonlyInline}} 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 {{readonlyInline}} 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 {{readonlyInline}} boolean true if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}} boolean true if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}} boolean true if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}} boolean true if the meta key was down when the event was fired. false otherwise.

示例

<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>

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

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

<script>
  var dragged;

  /* 拖动目标元素时触发drag事件 */
  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 ) {
      // 阻止默认动作以启用drop
      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);
</script>

Specifications

Specification Status Comment
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "drag event")}} {{Spec2("HTML WHATWG")}}
{{SpecName("HTML5.1", "editing.html#dndevents", "drag event")}} {{Spec2("HTML5.1")}} Initial definition

浏览器支持

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 4 {{CompatGeckoDesktop("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 {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatIE("10")}} {{CompatNo}} {{CompatNo}}

相关