原生js实现拖拽效果

在这里插入图片描述

<!DOCTYPE html>  
<html>  
<head>  
    <style>  
        #mydiv {  
            width: 200px;  
            height: 200px;  
            background-color: red;  
            position: absolute;  
            cursor: move;  
        }  
    </style>  |
</head>  
<body>  
    <div id="mydiv">拖拽我</div>  
    <script>  
        var mydiv = document.getElementById('mydiv');  
        var x = 0, y = 0;  
        var limitX = window.innerWidth - 200; // 设置元素的最大宽度为屏幕宽度减去元素的宽度  
        var limitY = window.innerHeight - 200; // 设置元素的最大高度为屏幕高度减去元素的高度  
  
        mydiv.onmousedown = function(e) {  
            x = e.clientX - mydiv.getBoundingClientRect().left;  
            y = e.clientY - mydiv.getBoundingClientRect().top;  
            document.onmousemove = function(e) {  
                var newX = e.clientX - x;  
                var newY = e.clientY - y;  
                if (newX < 0) newX = 0; // 防止元素向左拖出屏幕外  
                if (newY < 0) newY = 0; // 防止元素向上拖出屏幕外  
                if (newX > limitX) newX = limitX; // 防止元素向右拖出屏幕外  
                if (newY > limitY) newY = limitY; // 防止元素向下拖出屏幕外  
                mydiv.style.left = newX + 'px';  
                mydiv.style.top = newY + 'px';  
            };  
            document.onmouseup = function() {  
                document.onmousemove = null; // 当鼠标松开时,移除鼠标移动事件  
            };  
        };  
    </script>  
</body>  
</html>
<template>
  <div class="drag-box">
    <div id="dragContent">
      <div class="drag-home">
        <div class="drag-title" v-show="titleVisible"><br><br></div>
        <div class="drag-switch">
          <div class="message">
            <div class="name">液压支架</div>
            <div class="info">当前操作:前立柱升</div>
            <div class="info">当前操作:前立柱升</div>
          </div>
          <div class="drag-button">
            <div class="menu">
              <el-button type="primary" round>采煤机</el-button>
              <el-button type="success" round>液压知己</el-button>
              <el-button type="info" round>总控开关</el-button>
            </div>
            <div class="stats">
              <el-button type="success" round v-for="(item, index) in 9" :key="index" style="width: 8rem;">按钮{{ item }}</el-button>
              <i v-for="item in 9" :key="item"></i>
            </div>
            <div class="submit">
              <el-button type="primary" round>启动</el-button>
              <el-button type="success" round>停止</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted, getCurrentInstance } from 'vue'

export default {
  components: {},
  setup() {
    const state = reactive({
      rightDistance: '',
      leftWidth: '',
      maxWidth: '',
      titleVisible: false
    })

    onBeforeMount(() => {

    })

    onMounted(() => {
      var dragContent = document.getElementById('dragContent');
      var x = 0, y = 0;
      var limitX = window.innerWidth - 400; // 设置元素的最大宽度为屏幕宽度减去元素的宽度  
      state.maxWidth = limitX
      var limitY = window.innerHeight - 600; // 设置元素的最大高度为屏幕高度减去元素的高度  

      var box = document.getElementById("dragContent")
      box.addEventListener('mouseover', () => {
        if (state.drightDistance == 0) {
          box.style.left = `${state.maxWidth / 10}rem`
          box.style.transitionDuration =  '1s'
          setTimeout(() => {
            state.titleVisible = false
          }, 300)
        } else {
          box.style.transitionDuration =  '0s'
        }
      })
      
      box.addEventListener('mouseout', () => {
        if (state.drightDistance == 0) {
          box.style.left = `${state.maxWidth / 10 + 40}rem`
          box.style.transitionDuration =  '1s'
          setTimeout(() => {
            state.titleVisible = true
          }, 300)
        } else {
          box.style.transitionDuration =  '0s'
        }
      });

      dragContent.onmousedown = (e) => {
        x = e.clientX - dragContent.getBoundingClientRect().left;
        y = e.clientY - dragContent.getBoundingClientRect().top;
        document.onmousemove = function (e) {
          var newX = e.clientX - x;
          var newY = e.clientY - y;
          if (newX < 0) newX = 0; // 防止元素向左拖出屏幕外  
          if (newY < 0) newY = 0; // 防止元素向上拖出屏幕外  
          if (newX > limitX) newX = limitX; // 防止元素向右拖出屏幕外  
          if (newY > limitY) newY = limitY; // 防止元素向下拖出屏幕外  
          dragContent.style.left = newX + 'px';
          dragContent.style.top = newY + 'px';
          state.leftWidth = newX
          state.drightDistance = limitX - newX
          // console.log(state.leftWidth)
        };
        document.onmouseup = () => {
          document.onmousemove = null; // 当鼠标松开时,移除鼠标移动事件  
          console.log('当前坐标点', state.drightDistance)

          if (state.drightDistance == 0) {
            
          }
        }
      }
    })

    return {
      ...toRefs(state),
    }
  }
}
</script>
<style lang="scss" scoped>
.drag-box {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: absolute;
}

#dragContent {
  width: 400px;
  height: 600px;
  position: absolute;
  right: 8rem;
  top: 50%;
  cursor: move;
  .drag-home {
    height: 100%;
    position: relative;
    background-color: #091659;
    border-radius: 3rem;
    .drag-title {
      position: absolute;
      left: -4rem;
      top: calc(50% - 8rem);
      font-size: 2rem;
      width: 4rem;
      height: 16rem;
      background: #0b133d;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 1rem 0 0 1rem
    }
    .drag-switch {
      height: 100%;
      position: relative;
      .message {
        text-align: left;
        padding: 2rem;
        .name {
          font-size: 2.5rem;
          margin: 0.5rem 0;
        }
        .info {
          font-size: 1.4rem;
          margin: 0.3rem 0;
        }
      }
      .drag-button {
        height: 80%;
        background: #22387b;
        position: absolute;
        bottom: 0;
        width: 90%;
        left: 5%;
        border-radius: 2rem;
        .menu {
          margin: 1rem 0;
          height: 10%;
        }
        .stats {
          height: 75%;
          /*background: pink;*/
          justify-content: space-around;
          align-content: start;
          display: flex;
          flex-wrap: wrap;
          .el-button {
            margin: 1rem 0;
          }
          .el-button+.el-button {
            margin-left: unset;
          }
          i {
            margin: 1rem 0;
            width: 8rem;
          }
        }
        .submit {
          height: 15%;
        }
      }
    }
  }
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/327024.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于java web的机票管理系统设计与实现设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

机器学习扩散模型简介

一、说明 扩散模型的迅速崛起是过去几年机器学习领域最大的发展之一。在这本易于理解的指南中了解您需要了解的有关扩散模型的所有信息。 扩散模型是生成模型&#xff0c;在过去几年中越来越受欢迎&#xff0c;这是有充分理由的。仅在 2020 年代发布的几篇开创性论文就向世界…

socket.io分房间交流

基本详情看这里 Socket.IO 是一个库,可以在客户端和服务器之间实现 低延迟, 双向 和 基于事件的 通信. 效果展示 安装依赖 // 后端插件安装 npm i socket.io -S // 前端插件安装 npm i socket.io-client -S 前端搭建及逻辑 <script setup> import { ref, onMounted…

机器学习 | 卷积神经网络

机器学习 | 卷积神经网络 实验目的 采用任意一种课程中介绍过的或者其它卷积神经网络模型&#xff08;例如LeNet-5、AlexNet等&#xff09;用于解决某种媒体类型的模式识别问题。 实验内容 卷积神经网络可以基于现有框架如TensorFlow、Pytorch或者Mindspore等构建&#xff…

Vue2脚手架配置教程IDEA配置VUE

5.12.3 Vue Cli 文档地址: https://cli.vuejs.org/zh/ IDEA 打开项目&#xff0c;运行项目

React 原理

函数式编程 纯函数 reducer 必须是一个纯函数&#xff0c;即没有副作用的函数&#xff0c;不修改输入值&#xff0c;相同的输入一定会有相同的输出不可变值 state 必须是不可变值&#xff0c;否则在 shouldComponentUpdate 中无法拿到更新前的值&#xff0c;无法做性能优化操作…

Linux网络服务部署yum仓库

目录 一、网络文件 1.1.存储类型 1.2.FTP 文件传输协议 1.3.传输模式 二、内网搭建yum仓库 一、网络文件 1.1.存储类型 直连式存储&#xff1a;Direct-Attached Storage&#xff0c;简称DAS 存储区域网络&#xff1a;Storage Area Network&#xff0c;简称SAN&#xff0…

服务拆分及远程调用

分布式架构都离不开服务的拆分&#xff0c;微服务也是一样。 1.微服务拆分 不同微服务&#xff0c;不要重复开发相同业务 微服务数据独立&#xff0c;不要访问其它微服务的数据库 微服务可以将自己的业务暴露为接口&#xff0c;供其它微服务调用 2.远程调用 以前时&#xf…

Halcon提取亚像素轮廓edges_sub_pix算子

Halcon提取亚像素轮廓edges_sub_pix算子 最常用的提取亚像素轮廓的算子是edges_sub_pix算子&#xff0c;该算子同样提供了大量的提取方法&#xff0c;只需要在Filter 参数中设置方法的名字&#xff0c;就可以完成边缘的提取。该算子的输入是灰度图像&#xff0c;输出是XLD轮廓…

BurpSuite超详细安装教程-功能概述-配置-使用教程---(附下载链接)

一、介绍 BurpSuite是渗透测试、漏洞挖掘以及Web应用程序测试的最佳工具之一&#xff0c;是一款用于攻击web 应用程序的集成攻击测试平台&#xff0c;可以进行抓包、重放、爆破&#xff0c;包含许多工具&#xff0c;能处理对应的HTTP消息、持久性、认证、代理、日志、警报。 …

使用scipy处理图片——滚动图片

大纲 常规模式constant和grid-constant 交换模式wrap和grid-wrap 镜像reflect、mirror和grid-mirror 最近值nearest 代码 在《使用numpy处理图片——滚动图片》一文中&#xff0c;我们介绍了numpy的roll方法&#xff0c;它只能让超出区域的元素回到被移动的区域中&#xff0c;如…

图像提取大师:轻松从指定时长中获取某帧的图片,视频剪辑方法

在数字媒体时代&#xff0c;视频和图像已成为生活中不可或缺的部分。要从视频中提取某一帧作为图片&#xff0c;或者在视频剪辑时要采用其他的方法来达到需求的效果。下面来看云炫AI智剪如何轻松地从指定时长的视频中获取某帧的图片&#xff0c;视频剪辑的新方法。 视频中按指定…

Spring Cloud中的提供者与消费者

在服务调用关系中&#xff0c;会有两个不同的角色&#xff1a; 服务提供者&#xff1a;一次业务中&#xff0c;被其它微服务调用的服务。&#xff08;提供接口给其它微服务&#xff09; 服务消费者&#xff1a;一次业务中&#xff0c;调用其它微服务的服务。&#xff08;调用…

【竞技宝】DOTA2梦幻联赛 G2.iG让一追二击败Bright晋级败决!

北京时间2024年1月16日&#xff0c;DOTA2梦幻联赛S22中国区预选赛继续进行&#xff0c;本日首场比赛迎来G2.IG对阵Bright。本场比赛双方前两局战至1-1平&#xff0c;决胜局G2.iG monet的虚空在中期连续放出两个完美团战帮助G2.iG奠定胜势&#xff0c;最终G2.iG让一追二击败Brig…

Java 基础 - 06 List 之 Stack 以及List的相关总结

Java的栈&#xff0c;算是我们在Java中常见的一种数据结构&#xff0c;他遵循先进后出的原则&#xff08;Last-In-First-Out&#xff0c;LIFO&#xff09;的原则&#xff0c;在Java中&#xff0c;Stack是通过继承自Vector类实现的。 如上图所示&#xff0c;我们的stack继承自Ve…

el-table右固定最后一列显示不全或者是倒数第二列无边框线

问题图片&#xff1a; 解决方式1&#xff1a; >>>.el-table__row td:not(.is-hidden):last-child { border-left:1px solid #EBEEF5; } >>>.el-table__header th:not(.is-hidden):last-child{ border-left:1px solid #EBEEF5; } >>>.el-table__head…

苹果传拟移除Apple Watch血氧侦测功能 | 百能云芯

近日传来消息&#xff0c;苹果公司正考虑对部分型号的Apple Watch进行调整&#xff0c;可能会移除血氧侦测功能&#xff0c;以规避美国国际贸易委员会&#xff08;ITC&#xff09;在去年10月做出的禁售令决定。这一决定的背后是因为两款苹果智能手表&#xff0c;即Apple Watch …

Idea变量前面自动加final取消

本方式适用于点击 CtrlAltV获取方法返回值时&#xff0c;自动在变量前面加final 的情况。 每次都会生成final&#xff0c;删了自己挺麻烦&#xff0c;在网上搜了几个办法也不行。后来无意中看到下面这个。 通过AltShiftO调出弹出菜单 发现Declare final默认是选中&#xff0c;取…

【华为 ICT HCIA eNSP 习题汇总】——题目集1

1、&#xff08;多选&#xff09;根据下面所示的命令输出&#xff0c;下列描述中正确的是&#xff1f; A、GigabitEthernet0/0/1 允许VLAN1通过 B、GigabitEthernet0/0/1 不允许VLAN1通过 C、如果要把 GigabitEthernet0/0/1 变为 Access 端口&#xff0c;首先 需要使用命令“un…

云卷云舒:2024数据库发展趋势预测-长图版

云计算和大数据时代对数据库提出了更高的要求&#xff0c;需要支持大规模数据存储和处理。 数据库需要具备分布式和并行计算能力&#xff0c;以满足高性能和可扩展性的需求。新型数据库技术如NewSQL和分布式数据库成为云计算和大数据时代的趋势。 注&#xff1a;本文为chatGPT配…