文章來源地址http://www.zghlxwxcb.cn/news/detail-795477.html
<!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; // 設(shè)置元素的最大寬度為屏幕寬度減去元素的寬度
var limitY = window.innerHeight - 200; // 設(shè)置元素的最大高度為屏幕高度減去元素的高度
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; // 當(dāng)鼠標(biāo)松開時，移除鼠標(biāo)移動事件
};
};
</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">當(dāng)前操作:前立柱升</div>
<div class="info">當(dāng)前操作:前立柱升</div>
</div>
<div class="drag-button">
<div class="menu">
<el-button type="primary" round>采煤機(jī)</el-button>
<el-button type="success" round>液壓知己</el-button>
<el-button type="info" round>總控開關(guān)</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; // 設(shè)置元素的最大寬度為屏幕寬度減去元素的寬度
state.maxWidth = limitX
var limitY = window.innerHeight - 600; // 設(shè)置元素的最大高度為屏幕高度減去元素的高度
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; // 當(dāng)鼠標(biāo)松開時，移除鼠標(biāo)移動事件
console.log('當(dāng)前坐標(biāo)點', 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>
文章來源：http://www.zghlxwxcb.cn/news/detail-795477.html
到了這里，關(guān)于原生js實現(xiàn)拖拽效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[WPF]原生TabControl控件實現(xiàn)拖拽排序功能](https://imgs.yssmx.com/Uploads/2024/02/711335-1.gif)
