dragstart

当用户开始拖动一个元素或者一个选择文本的时候 dragstart 事件就会触发。.

基本信息

Bubbles	Yes
Cancelable	Yes
Target objects	`Document`, `Element`
Interface	`DragEvent`
Default Action	Initiate the drag-and-drop operation.

属性

Property	Type	Description
`target` 只读	`EventTarget`	The element that will be 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);

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

dragstart

基本信息

属性

示例：dropzone

HTML 内容

CSS 内容

JavaScript 内容

浏览器支持

相关事件

文档标签和贡献者