2022-7-19课程总结

最新推荐文章于 2024-05-20 21:21:56 发布

赫尔曼.

最新推荐文章于 2024-05-20 21:21:56 发布

阅读量306

点赞数

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/m0_72741512/article/details/125879034

版权

拖放

拖放（Drag 和 Drop）是很常见的特性。它指的是您抓取某物并拖入不同的位置。

拖放是 HTML5 标准的组成部分：任何元素都是可拖放的。

<!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>
        #result, #result2{
            width: 200px;
            height: 255px;
            border: 1px solid red;
            float: left;
        }
    </style>
</head>
<body>
    <p>将图片拖进框里</p>
    <div id="result" ondragover="allowDrag(event)" ondrop="drop(event)"></div>
    
        <img id="sadas" src="./flower.jpg" alt="" draggable="true" ondragstart="drag(event)">
   
   
    <script type="text/javascript">
        function drag(ev){
            ev.dataTransfer.setData("Text",ev.target.id);

        }
        function allowDrag(ev){
            ev.preventDefault();
        }

        function drop(ev){
            ev.preventDefault();
            var id=ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(id));
        }
      
    </script>
</body>
</html>

第一步为了把一个元素设置为可拖放，先把 draggable 属性设置为 true：

<img draggable="true">

第二步设置拖放的内容 - ondragstart 和 setData()

然后，规定当元素被拖动时发生的事情。

在上面的例子中，ondragstart 属性调用了一个 drag(event) 函数，规定拖动什么数据。

dataTransfer.setData() 方法设置被拖动数据的数据类型和值

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

第三步拖到何处 - ondragover

ondragover 事件规定被拖动的数据能够被放置到何处。

默认地，数据/元素无法被放置到其他元素中。为了实现拖放，我们必须阻止元素的这种默认的处理方式。

这个任务由 ondragover 事件的 event.preventDefault() 方法完成：

event.preventDefault()

最后一步进行放置 - ondrop

当放开被拖数据时，会发生 drop 事件。

在上面的例子中，ondrop 属性调用了一个函数，drop(event)：

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

附加：如需设置两个图片来回拖动只需要在设置一个div标签即可


    <p>将图片拖进框里</p>
    <div id="result" ondragover="allowDrag(event)" ondrop="drop(event)"></div>
    <div id="result2" ondragover="allowDrag(event)" ondrop="drop(event)">
        <img id="sadas" src="./flower.jpg" alt="" draggable="true" ondragstart="drag(event)">
    </div>

最后效果