原生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 = limitXvar 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 = newXstate.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>