您用过HTML的ondragover事件吗？

作者：天空2019.09.25来源：Web前端之家浏览：8424评论:0

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>

看下效果：