ondragstart

收藏:0   阅读:38

ondragstart 事件

ondragstart 事件在用户开始拖动元素或选择的文本时触发。

拖放是 HTML5 中非常常见的功能。

注意: 为了让元素可拖动,需要使用 HTML5 draggable 属性。

提示: 链接和图片默认是可拖动的,不需要 draggable 属性。

在拖放的过程中会触发以下事件:

  • 在拖动目标上触发事件 (源元素):
    • ondragstart - 用户开始拖动元素时触发
    • ondrag - 元素正在拖动时触发
    • ondragend - 用户完成元素拖动后触发

  • 释放目标时触发的事件:
    • ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
    • ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
    • ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
    • ondrop - 在一个拖动过程中,释放鼠标键时触发此事件

浏览器支持

注意: 在拖动元素时,每隔 350 毫秒会触发 ondragover 事件。

事件
ondragstart 4.0 9.0 3.5 6.0 12.0


语法

HTML 中:

<element ondragstart="myScript">

JavaScript 中:

object.ondragstart=function(){myScript};

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("dragstart", myScript);

注意: Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。


技术细节
是否支持冒泡: Yes
是否可以取消: Yes
事件类型: DragEvent
支持的 HTML 标签: All HTML elements


 

实例

以下实例演示了所有的拖放事件:

<p draggable="true" id="dragtarget">Drag me!</p>

<div class="droptarget">Drop here!</div>

<script>
/* ----------------- Events fired on the drag target ----------------- */

document.addEventListener("dragstart", function(event) {
  // The dataTransfer.setData() method sets the data type and the value of the dragged data
  event.dataTransfer.setData("Text", event.target.id);
 
  // Output some text when starting to drag the p element
  document.getElementById("demo").innerHTML = "Started to drag the p element.";
 
  // Change the opacity of the draggable element
  event.target.style.opacity = "0.4";
});

// While dragging the p element, change the color of the output text
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});

// Output some text when finished dragging the p element and reset the opacity
document.addEventListener("dragend", function(event) {
  document.getElementById("demo").innerHTML = "Finished dragging the p element.";
  event.target.style.opacity = "1";
});


/* ----------------- Events fired on the drop target ----------------- */

// When the draggable p element enters the droptarget, change the DIVS‘s border style
document.addEventListener("dragenter", function(event) {
  if ( event.target.className == "droptarget" ) {
  event.target.style.border = "3px dotted red";
  }
});

// By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element
document.addEventListener("dragover", function(event) {
  event.preventDefault();
});

// When the draggable p element leaves the droptarget, reset the DIVS‘s border style
document.addEventListener("dragleave", function(event) {
  if ( event.target.className == "droptarget" ) {
  event.target.style.border = "";
  }
});

/* On drop - Prevent the browser default handling of the data (default is open as link on drop)
Reset the color of the output text and DIV‘s border color
Get the dragged data with the dataTransfer.getData() method
The dragged data is the id of the dragged element ("drag1")
Append the dragged element into the drop element
*/
document.addEventListener("drop", function(event) {
  event.preventDefault();
  if ( event.target.className == "droptarget" ) {
  document.getElementById("demo").style.color = "";
  event.target.style.border = "";
  var data = event.dataTransfer.getData("Text");
  event.target.appendChild(document.getElementById(data));
  }
});
</script>
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!