功能就是可以拖动一个元素到另外一个元素之上就可以切换位置
求助大佬们了，呜呜呜
1***@qq.com
- 发布：2023-09-11 10:42
- 更新：2023-09-11 12:07
- 阅读：367
喜欢技术的前端 - QQ---445849201
试试这个，然后套到你的页面中，mui很久了，怎么现在用起这个来了 (●'◡'●)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,html{
padding: 0;
margin: 0;
}
.div {
width: 300px;
height: 300px;
background-color: #ccc;
position: relative;
}
.div2 {
width: 60px;
height: 60px;
background-color: blue;
position: absolute;
top:0;
left: 0;
z-index: 2;
}
</style>
</head>
<body >
<div class="div" >
<div class="div2" id="draggable">
</div>
</div>
<script>
let draggable = document.getElementById('draggable')
let endX = 0;
let endY = 0;
let clientWidth = document.documentElement.clientWidth;
let clientHeight = document.documentElement.clientHeight;
console.log(clientWidth)
console.log(clientHeight)
draggable.addEventListener('touchmove', (event) => {
var touch = event.targetTouches[0];
//手势滑动时，手势坐标不断变化，取最后一点的坐标为最终的终点坐标
endX = touch.pageX;
endY = touch.pageY;
console.log(endX,endY)
if(endX<0){
endX = 0
}
if(endX>=clientWidth - 60){//拖动元素的宽度
endX = clientWidth - 60
}
if(endY<0){
endY = 0
}
if(endY>=clientHeight - 60){//拖动元素的高度
endY = clientHeight - 60
}
})
draggable.addEventListener('touchend', (event) => {
// console.log(event)
console.log(endX,endY)
draggable.style.left = endX+'px'
draggable.style.top = endY+'px'
})
</script>
</body>
</html>
1***@qq.com (作者)
谢谢大佬回答,拖动效果我是做出来了,但是有一个功能就是比如首页有一些快捷进入功能的icon我可以长按icon可以拖拽,拖拽到另一个icon功能上可以切换它的位置,我是这个意思,多谢大佬了
2023-09-11 14:12
喜欢技术的前端
回复 1***@qq.com: 就跟手机桌面图标换位置一样吧，这个你得记录每个坐标的位置以及所占的区域，将一个图标拖动到另一个图标的区域时，替换掉它
2023-09-11 14:38
1***@qq.com (作者)
回复 喜欢技术的前端: 多谢大佬
2023-09-11 14:45
喜欢技术的前端
回复 1***@qq.com: 不客气(●'◡'●)
2023-09-11 14:51