js原生实现拖拽

最新推荐文章于 2024-07-10 14:36:18 发布

太阳与我肩并肩

最新推荐文章于 2024-07-10 14:36:18 发布

阅读量304

点赞数

分类专栏： JS 文章标签： vue.js html5 javascript css3

本文链接：https://blog.csdn.net/weixin_50206068/article/details/117984765

版权

JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

js原生实现拖拽

知识点：
原生对dom的操作 , 本地存储 , es6的解构赋值 , es6的类 , dom的一级事件，拖拽的实现

在这里插入图片描述

一、对dom的简单操作

dom的创建
dom的插入
设置dom样式
设置dom属性
查找dom元素

二、本地存储

使用了localStorage
设置localStorage.setItem
获取localStorage.getItem

三、解构赋值

对象的解构

四、class类的简单使用

拖拽的原理

首先要了解这三种事件(ele=>元素 ----- document => 文档对象)

ele.onmousedown：鼠标按下事件
document.onmousemove：鼠标移动事件
document.onmouseup：鼠标抬起事件

原理

一定要绝对定位，脱离文档流才可以移动。
绑定拖拽的元素，移动和鼠标松开后是对document的绑定，因为移动的是整个div。
点击：a= 获取当前鼠标坐标、b =div距浏览器距离、c = 鼠标在div内部距离=a-b。
移动：通过 a - c 建立鼠标与div的关系，防止鼠标超出div。

代码来喽 @ . @

–

<!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>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
      height: 100%;
    }

    img {
      display: block;
      pointer-events: none;
      user-select: none;
    }
  </style>
</head>

<body>
  <script>
    class Drag {
      name;
      src;
      constructor(name, src) {
        this.name = name || '没有名字';
        this.src = src || 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201809%2F01%2F20180901190625_wmpeq.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626489491&t=cdfd171890f33cc3c37ce7e485821030';
        this.isLocal()
      }

      // 判断本地  localStorage  中是否存在  position
      isLocal() {
        if (!localStorage.position) this.setLocal('10%', '30%')
        this.createEle()
      }

      // 创建元素
      createEle() {

        const divEle = document.createElement('div')
        divEle.className = 'divEle'
        this.eleSty(divEle)

        const hEle = document.createElement('h1')
        hEle.innerHTML = this.name
        hEle.className = 'hEle'
        this.eleSty(hEle)

        const imgEle = document.createElement('img')
        imgEle.className = 'imgEle'
        this.eleSty(imgEle)

        divEle.appendChild(hEle)
        divEle.appendChild(imgEle)
        window.document.body.appendChild(divEle)

        this.down(hEle)
      }

      // 拖拽方法
      down(ele) {

        ele.onmousedown = eve => {
          var eve = eve || window.eve;
          var eleX = eve.clientX - ele.parentNode.offsetLeft;
          var eleY = eve.clientY - ele.parentNode.offsetTop;

          document.onmousemove = event => {
            var event = event || window.event;
            var moveX = event.clientX - eleX;
            var moveY = event.clientY - eleY;

            if (moveX < 0) {
              moveX = 0
            } else if (moveX > window.innerWidth - ele.parentNode.offsetWidth) {
              moveX = window.innerWidth - ele.parentNode.offsetWidth
            }

            if (moveY < 0) {
              moveY = 0
            } else if (moveY > window.innerHeight - ele.parentNode.offsetHeight) {
              moveY = window.innerHeight - ele.parentNode.offsetHeight
            }

            ele.parentNode.style.left = moveX + 'px';
            ele.parentNode.style.top = moveY + 'px';
            this.setLocal(moveY, moveX)
          }

          document.onmouseup = () => {
            document.onmousemove = null;
            document.onmouseup = null;
          }
        }
      }

      //设置localStorage
      setLocal(t, l) {
        let position = {}
        position.top = typeof t == 'number' ? t + 'px' : t;
        position.left = typeof l == 'number' ? l + 'px' : l;
        localStorage.setItem('position', JSON.stringify(position))
      }

      // 元素样式
      eleSty(ele) {
        if (ele.className == 'divEle') {
          let { top, left } = JSON.parse(localStorage.getItem('position'))

          ele.style.width = '350px';
          ele.style.height = '400px';
          ele.style.backgroundColor = '#fff';
          ele.style.borderRadius = '20px';
          ele.style.overflow = 'hidden';
          ele.style.boxShadow = '0 0 10px #bbb';
          ele.style.position = 'absolute';
          ele.style.top = top;
          ele.style.left = left;

        } else if (ele.className == 'hEle') {
          ele.style.width = '100%';
          ele.style.height = '50px';
          ele.style.backgroundColor = '#fff';
          ele.style.textAlign = 'center';
          ele.style.lineHeight = '50px';
          ele.style.color = '#342c2a';
          ele.style.fontSize = '18px';
          ele.style.cursor = 'pointer';
          ele.style.userSelect = 'none';

        } else {
          ele.style.width = '100%';
          ele.getAttribute('src')
          ele.setAttribute('src', `${this.src}`)
        }
      }
    }

    new Drag('我的金子，只给千寻', 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201809%2F01%2F20180901190625_wmpeq.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626489491&t=cdfd171890f33cc3c37ce7e485821030')
  </script>
</body>

</html>