js 实现拖动元素到任意位置

最新推荐文章于 2025-04-11 13:51:40 发布

halo1416

最新推荐文章于 2025-04-11 13:51:40 发布

阅读量5.3k

点赞数 5

分类专栏： JavaScript 文章标签： javascript vue 拖动

本文链接：https://blog.youkuaiyun.com/halo1416/article/details/122859191

版权

JavaScript 专栏收录该内容

33 篇文章

订阅专栏

一、实现效果

请添加图片描述

二、实现代码

主要通过原生的 mousedown 和 mouseup 以及mouseleave 事件实现

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

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport"
    content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width" />
  <title>拖动效果</title>

  <!-- 引入element样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入element组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 引入vue -->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>

  <style type="text/css">
    #call_state_marked{
      position: fixed;
      top: 50px;
      left: 100px;
      z-index: 9;
      color: #f00;
      background: #fff;
      font-size: 16px;
      width: 60px;
      height: 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      box-shadow: -3px 0px 6px 0px #a9a9a980, 3px 0px 6px 0px #a9a9a980;
      border-radius: 4px;
      
    }
    #call_state_marked span:nth-child(1) {
      font-size: 20px;
      font-weight: 600;
    }
  </style>
</head>

<body>
  <div id="content">
  <div id="call_state_marked" @mousedown="handleMouseDown" @mouseup="handleMouseUp">
    <span class="el-icon-phone"></span>
    <span>挂断</span>
  </div>
</div>
  
  <script>
    var vue = new Vue({
      el: '#content',
      data: {
        
      },
      mounted() {
        // 监听页面的mouseleave事件，当鼠标移出浏览器页面可用区域 并 松开按键时，停止拖动
        document.addEventListener("mouseleave", (e) => {
          document.onmousemove = document.onmouseup = null;
        });
      },
      methods: {
        // 拖动效果
        handleMouseDown(e) {
          
          let box = document.getElementById('call_state_marked');
          // e.pageX, e.pageY 是鼠标在页面上的坐标
          // box.offsetLeft, box.offsetTop 是元素相对于页面左上角的偏移位置
          // disx, disy 便是鼠标相对于元素左上角的偏移位置
          let disx = e.pageX - box.offsetLeft;
          let disy = e.pageY - box.offsetTop;

          // document.documentElement.clientWidth: 浏览器页面可用宽度
          // document.documentElement.clientHeight: 浏览器页面可用高度

          document.onmousemove = function (e) {       // 鼠标移动的时候计算元素的位置
            let x, y;
            // e.pageX - disx  鼠标在页面上的位置 - 鼠标在元素中的偏移位置  得到的是元素相对于页面左上角的偏移位置
            if ((e.pageX - disx) > 0) {  // 元素相对于页面左上角的偏移位置 大于0时
              if ((e.pageX - disx) > document.documentElement.clientWidth - 60) {   // 元素相对于页面左上角的偏移位置 移出到页面以外（右侧）
                x = document.documentElement.clientWidth - 60;   // 60是元素自身的宽高
              } else {
                x = e.pageX - disx;
              }
            } else {    // 元素移到到页面以外（左侧）
              x = 0;
            }

            if ((e.pageY - disy) > 0) {
              if ((e.pageY - disy) > document.documentElement.clientHeight - 60) {   // 元素移动到页面以外（底部）
                y = document.documentElement.clientHeight - 60;
              } else {
                y = e.pageY - disy;
              }
            } else {        // 元素移动到页面以外（顶部）
              y = 0;
            }


            box.style.left = x + 'px';
            box.style.top = y + 'px';
          }
        },
        // 释放鼠标按钮，将事件清空，否则始终会跟着鼠标移动
        handleMouseUp() {
          document.onmousemove = document.onmouseup = null;
        },
      },
    });
  </script>
</body>

</html>