VUE：实现网页中元素的拖动

最新推荐文章于 2024-05-17 04:51:24 发布

前端-如此如此。

最新推荐文章于 2024-05-17 04:51:24 发布

阅读量2.2k

点赞数 1

分类专栏： web前端之VUE

本文链接：https://blog.csdn.net/weixin_44136505/article/details/108381256

版权

这篇博客介绍了如何在Vue中实现网页元素的拖动功能，特别关注于在指定范围内进行横向拖动的实现。通过学习HTML的拖动案例，然后在Vue中应用并限制拖动范围，为开发者提供了实现此类交互的指导。

摘要由CSDN通过智能技术生成

简介

实现页面中的元素拖动。

学习案例（HTML：可任意拖动）

→ 链接地址 ←

<html>
<head>
  <title>拖动效果bai函数演示 by Longbill.cn</title>
  <style>
    body {
      font-size: 12px;
      color: #333333;
      border: 0px solid blue;
    }
    div {
      position: absolute;
      background-color: #c3d9ff;
      margin: 0px;
      padding: 5px;
      border: 0px;
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <script>
    function drag(o, s) {
      if (typeof o == "string") o = document.getElementById(o);
      o.orig_x = parseInt(o.style.left) - document.body.scrollLeft;
      o.orig_y = parseInt(o.style.top) - document.body.scrollTop;
      o.orig_index = o.style.zIndex;
      o.onmousedown = function (a) {
        this.style.cursor = "move";
        this.style.zIndex = 10000;
        var d = document;
        if (!a) a = window.event;
        var x = a.clientX + d.body.scrollLeft - o.offsetLeft;
        var y = a.clientY + d.body.scrollTop - o.offsetTop;
        d.ondragstart = "return false;"
        d.onselectstart = "return false;"
        d.onselect = "document.selection.empty();"
        if (o.setCapture)
          o.setCapture();
        else if (window.captureEvents)
          window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
        d.onmousemove = function (a) {
          if (!a) a = window.event;
          o.style.left = a.clientX + document.body.scrollLeft - x;
          o.style.top = a.clientY + document.body.scrollTop - y;
          o.orig_x = parseInt(o.style.left) - document.body.scrollLeft;
          o.orig_y = parseInt(o.style.top) - document.body.scrollTop;
        }
        d.onmouseup = function () {
          if (o.releaseCapture)
            o.releaseCapture();
          else if (window.captureEvents)
            window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
          d.onmousemove = null;
          d.onmouseup = null;
          d.ondragstart = null;
          d.onselectstart = null;
          d.onselect = null;
          o.style.cursor = "normal";
          o.style.zIndex = o.orig_index;
        }
      }
      if (s) {
        var orig_scroll = window.onscroll ? window.onscroll : function () {};
        window.onscroll = function () {
          orig_scroll();
          o.style.left = o.orig_x + document.body.scrollLeft;
          o.style.top = o.orig_y + document.body.scrollTop;
        }
      }
    }
  </script>
  <div id="div1" style="left:10px;top:10px;">div1:我可以被拖动</div>
  <div id="div2" style="left:120px;top:10px;background-color : #f3d9ff">div2:来拖我呀zhi</div>
  <div id="div3" style="left:230px;top:10px;background-color : #c3ffff">div3:我随便你拖</div>
  <div id="div4" style="left:10px;top:120px;background-color : #c3d944">div4:我可以随窗口滑动，把我拖到最下面，然后滚动网dao页看看</div>
  <div id="div5" style="left:120px;top:120px;background-color : #f3d944">作者: Longbill
    <a href=http://www.longbill.cn target=_blank>www.longbill.cn</a>
  </div>
  <div id="div6" style="left:230px;top:120px;background-color : #e3f944;width:200px;">参数说明:
    drag(obj [,scroll]);
    obj:对象的id或对象本身;
    scro