ondragover

阅读:34      收藏:0      [点我收藏+]

ondragover 事件

ondragover 事件在可拖动元素或选取的文本正在拖动到放置目标时触发。

默认情况下,数据/元素不能放置到其他元素中。 如果要实现改功能,我们需要防止元素的默认处理方法。我们可以通过调用 event.preventDefault() 方法来实现 ondragover 事件。

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

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

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

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

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

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

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


浏览器支持

表格中的数字表示支持该事件的第一个浏览器的版本号。

事件
ondragover 4.0 9.0 3.5 6.0 12.0


语法

HTML 中:

<element ondragover="myScript">

JavaScript 中:

object.ondragover=function(){myScript};

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("dragover", 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>


关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!