使用html5新特性拖拽实现

伊小小小凡

已于 2022-05-29 14:33:10 修改

阅读量457

点赞数

文章标签： html5 javascript 前端

于 2022-05-22 00:00:44 首次发布

本文链接：https://blog.csdn.net/qq_43784866/article/details/124905391

版权

使用`html5`新特性实现拖拽

实现原理

实现流程：

将拖拽的元素设置成可拖拽， draggable = true
ondragstart 开始拖拽的回调函数获取并存放拖拽元素
ondragover 拖拽完成阻止浏览器默认行为，浏览器默认不可拖拽
ondrop 拖拽释放用来获取拖拽元素，将目标元素添加到当前盒子内

代码

<!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>拖拽</title>
    <style>
      div#box {
        width: 750px;
        height: 800px;
        border: 1px solid #000;
        margin-right: 20px;
        float: left;
      }
      img {
        width: 600px;
        height: 400px;
      }
      div#prev {
        width: 750px;
        height: 800px;
        border: 1px solid #000;
        margin-right: 20px;
        float: right;
      }
    </style>
  </head>
  <body>
    <!-- 
    实现流程：
    1. 将拖拽的元素设置成可拖拽， draggable = true
    2. ondragstart  开始拖拽的回调函数 获取并存放拖拽元素
    3. ondragover 拖拽完成 阻止浏览器默认行为，浏览器默认不可拖拽
    4. ondrop 拖拽释放用来获取拖拽元素，将目标元素添加到当前盒子内
  -->
    <div id="box" ondragover="dragover(event)" ondrop="imgDrop(event)">
      <h1>请将图片拖拽到这里</h1>
    </div>
    <div id="prev" ondragover="dragover(event)" ondrop="imgDrop(event)">
      <h1>图片展示区</h1>
      <img
        id="img"
        src="./images//自来也.jpg"
        alt=""
        draggable="true"
        ondragstart="imgDrag(event)"
      />
    </div>

    <script>
      // 开始拖拽
      function imgDrag(e) {
        // 储存拖拽元素的 id 存给 Text，setData 方法无返回结果
        e.dataTransfer.setData('Text', e.target.id)
      }
      // 释放拖拽
      function imgDrop(e) {
        let img = e.dataTransfer.getData('Text') // 获取拖拽元素的 id
        // console.log(img)
        let el = document.getElementById(img) // 根据 id 获取拖拽元素
        // console.log(el)
        e.target.appendChild(el) // 将拖拽的元素给目标元素
      }
      // 拖拽完成
      function dragover(e) {
        e.preventDefault() // 阻止浏览器默认行为，浏览器默认不可拖拽
      }
    </script>
  </body>
</html>

效果演示

在这里插入图片描述

伊小小小凡

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用html5新特性拖拽实现

使用html5新特性实现拖拽实现原理实现流程：将拖拽的元素设置成可拖拽， draggable = trueondragstart 开始拖拽的回调函数获取并存放拖拽元素ondragover 拖拽完成阻止浏览器默认行为，浏览器默认不可拖拽ondrop 拖拽释放用来获取拖拽元素，将目标元素添加到当前盒子内代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /&
复制链接

扫一扫