拖放的案例

最新推荐文章于 2025-11-24 21:21:07 发布

原创最新推荐文章于 2025-11-24 21:21:07 发布 · 109 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

本文介绍了如何使用HTML5的拖放API来实现网页元素的拖动功能。通过设置`draggable`属性为`true`，元素即可被拖动。`ondragstart`事件标志着拖动开始，`ondragover`处理拖动过程中元素允许放置的位置，而`ondrop`事件用于处理元素的放下操作。示例代码展示了如何在两个`<p>`元素间拖放一张图片。

1.设置拖动元素：draggable =“true” 用来设置元素可拖动

2.表示拖动开始 ondragstart

3.拖动到那？ ondragover 拖放的过程：ondrag

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #p1,
        #p2 {
            width: 200px;
            height: 260px;
            border: 2px solid black;
        }
    </style>
</head>

<body>
    <!-- ondragover="" 拖动到哪？拖动结束！ 
     ondrop="" 拖动的过程
      -->
    <p id="p1" ondragover="allowDrag(event)" ondrop="drop(event)"></p>
    <p id="p2" ondragover="allowDrag(event)" ondrop="drop(event)"></p>
    <!-- draggable="true" 代表可以拖动  false为默认值不可拖动-->
    <!-- ondragstart="drag()" 拖动的开始  drag()下面js-->
    <img src="img/flower.jpg" id="img" draggable="true" ondragstart="drag(event)" alt="">
    <script type="text/javascript">
        //拖动开始 
        function drag(ev) {
            ev.dataTransfer.setData("Text", ev.target.id);
        }
        //拖动过程
        function drop(ev) {
            ev.preventDefault();
            var id = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(id));
        }
        //拖动结束
        function allowDrag(ev) {
            ev.preventDefault()
        }
    </script>
</body>

</html>