JavaScript拖拽API的简单使用

演示效果:

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            display: flex;
        }

        #box1,
        #box2 {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }

        #box2 {
            margin-left: 100px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div id="box1"></div>
        <div id="box2">
            <!-- 将图片设置为可拖拽状态 -->
            <img id="pic" draggable="true" src="./images/car.png">
        </div>
    </div>

    <script>
        const box1 = document.querySelector('#box1');
        const pic = document.querySelector('#pic');

        // 将鼠标指针悬停在box1元素上,并拖拽其他元素时
        box1.addEventListener('dragover', e => {
            e.preventDefault(); // 阻止默认行为
        })

        // 当拖放操作在目标元素上执行时触发
        box1.addEventListener('drop', e => {
            const id = e.dataTransfer.getData('text/plain'); // 获取拖拽数据
            e.target.appendChild(document.getElementById(id)); // 将拖拽的元素添加到目标元素中
        })

        // 拖放开始时触发
        pic.addEventListener('dragstart', e => {
            console.log('开始拖拽', e);
            e.dataTransfer.setData('text/plain', e.target.id); // 设置拖拽数据
        })

        // 拖放操作结束时触发
        pic.addEventListener('dragend', e => {
            console.log('结束拖拽', e);
        })
    </script>
</body>

</html>
相关推荐
crary,记忆1 分钟前
Angular如何让整个项目的所有页面能够整体缩小一定的比例?
javascript·ecmascript·angular.js
Mintopia15 分钟前
🤖 算法偏见修正:WebAI模型的公平性优化技术
前端·javascript·aigc
江城开朗的豌豆27 分钟前
小程序与H5的“握手言和”:无缝嵌入与双向通信实战
前端·javascript·微信小程序
枫叶丹430 分钟前
【Qt开发】多元素类控件(三)-> QTreeWidget
开发语言·数据库·c++·qt
你的电影很有趣32 分钟前
lesson73:Vue渐进式框架的进化之路——组合式API、选项式对比与响应式新范式
javascript·vue.js
江城开朗的豌豆33 分钟前
小程序静默更新?用户却无感?一招教你“强提醒”
前端·javascript·微信小程序
晨非辰34 分钟前
【数据结构入坑指南】--《层序分明:堆的实现、排序与TOP-K问题一站式攻克(源码实战)》
c语言·开发语言·数据结构·算法·面试
小张成长计划..34 分钟前
VUE工程化开发模式
前端·javascript·vue.js
洲覆43 分钟前
Redis 驱动适配 Reactor 模式
开发语言·网络·数据库·redis
fl17683144 分钟前
基于matlab实现的DnCNN网络
开发语言·matlab