×

您用过HTML的ondragover事件吗?

作者:天空2019.09.25来源:Web前端之家浏览:187评论:0
关键词:ondragoverhtml5
微信公众号

微信公众号

ondragover事件,看上去很陌生啊,一起来了解下吧。如果可拖动的元素或文本被拖动到有效的放置目标,则ondragover事件属性将触发;拖动一个元素将该元素拖动到拖动点时即可触发该事件属性。ondragover事件属性是HTML5中的新功能,是 HTML5中非常常见的功能。

语法:

<element ondragover="script">

属性值:它包含一个值脚本,该脚本保存要在ondragover事件上运行的脚本。

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

注: 为了让元素可拖动,需要使用HTML5 draggable 属性;但默认情况下,图像和链接是可拖动的,不需要 draggable 属性。

示例:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<style> 
        .box { 
            width: 250px; 
            height: 100px; 
            margin: 15px; 
            padding: 5px; 
            border: 2px solid black; 
            color: red; 
        } 
    </style>
    <script> 
      
        function dragStart(event) { 
            event.dataTransfer.setData("Text", event.target.id); 
        } 
  
        function allowDrop(event) { 
            event.preventDefault(); 
            document.getElementById("demo").innerHTML = "元素在底部框上"; 
            event.target.style.border = "3px solid red"; 
        } 
  
        function drop(event) { 
            event.preventDefault(); 
            var data = event.dataTransfer.getData("Text"); 
            event.target.appendChild(document.getElementById(data)); 
            document.getElementById("demo").innerHTML = "元素被拖动到底部框中了"; 
        } 
    </script>
</head>
<body style="text-align:center;">
	<center> 
        <p>从顶部框中拖动元素并放到底部框中</p>  
        <div class="box"> 
            <h1 ondragstart="dragStart(event)" draggable="true" id="dragtarget">  
                Hello World!  
            </h1> 
        </div> 
  
        <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
  
        <p style="clear:both;"></p> 
          
        <p id="demo"></p> 
    </center> 
</body> 
  
</html>

看下效果:

1563245670605374.gif

看上去很牛逼的样子。

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

 ● 在拖动目标上触发事件 (源元素):

  ○ ondragstart:当用户开始拖动元素时触发。

  ○ ondrag:在拖动元素时触发。

  ○ ondragend:当用户不再拖动元素时触发它。

 ● 释放目标时触发的事件:

  ○ ondragenter:当拖动的元素进入放置目标时触发。

  ○ ondragover:当拖动的元素超过放置目标时,将触发此操作。

  ○ ondragleave:当拖动的元素离开放置目标时会触发。

  ○ ondrop:当拖放的元素被放置在放置目标上时,将触发此操作。

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://www.miarww.com.cn/article/ondragover0238409283094.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright ? 2019 Web前端之家(www.miarww.com.cn) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero

时时彩平台哪个好