有两个BUG未更正,
1.拖拽后,动态创建的div始终在鼠标的下方,导致拖拽定位不准确
2.当窗口为自适应时,定位left为百分比,窗口改变大小时会存在定位偏差
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./jquery-1.11.3.min.js"></script>
<style>
#zt{
position: relative;
}
.div01{
width: 100px;
height: 100px;
position: fixed;
top: 0;
left: 50%;
border: 1px solid;
}
.test{
width: 10px;
height: 10px;
overflow: hidden;
cursor: se-resize;
position: absolute;
right: 0;
bottom: 0;
background-color: #000000;
}
.div01.boder{
border:3px solid;
}
.warp{
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="zt">
<div class="warp">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
<script>
$(function () {
//第一部分，动态添加可移动div节点
$("#zt").prepend(`<i class="add_a_btn" style="font-size: .4rem;background: #ccc;font-style: normal;padding: .1rem .2rem;border-radius: .2rem;position: fixed;top: 0;left: .4rem;z-index: 999;cursor: pointer;">创建可移动按钮</i>`);
$("#zt").on("click", ".add_a_btn", function(){
$(".warp").append(`
<div class="div01 link-box-area" draggable="true">
<a href="">编辑链接</a>
<div class="test"></div>
<span>×</span>
</div>
`);
//每次添加，遍历每个节点挂载触发函数
$(‘.div01‘).each((i,e) =>{
bindResize($(‘.div01‘)[i]);
Drag($(‘.div01‘)[i])
})
//H5拖拽封装
function Drag(divDrag){
// 第二部分，拖拽事件
// 生命周期
// 1.鼠标按下，拖拽开始
// 2.移动鼠标，拖拽中
// 3.松开鼠标，拖拽结束
var startX = 0; //拖拽开始的坐标初始化
var startY = 0;
console.log(divDrag.offsetTop)
divDrag.ondragstart = function(event){ //按下的时候必须移动一下
var event = event || window.event;
console.log(event)
console.log(‘拖拽开始‘)
console.log(this.offsetTop)
$(this).addClass(‘boder‘); //拖拽时候的样式
startX = event.clientX; //将开始拖拽时候的坐标赋值
startY = event.clientY;
}
divDrag.ondrag = function(){ //鼠标按下了以后，只要移动一下，这个事件就一直处于触发中
console.log(‘移动中‘)
}
divDrag.ondragend = function(){
console.log(‘结束‘);
console.log(event)
$(this).removeClass(‘boder‘); //移除拖拽时的样式
var x = event.clientX - startX; //结束时候的坐标减去开始时候的坐标，等于移动的距离
var y = event.clientY - startY;
this.style.position = ‘absolute‘;
this.style.top = window.scrollY+event.clientY+"px";
// 自适应宽度转换百分比
var _y = divDrag.offsetLeft + x;
this.style.left= _y/event.view.innerWidth * 100 + ‘%‘
}
}
//第三部分，拖拽改变大小
//绑定需要拖拽改变大小的元素对象
function bindResize(el) {
//初始化参数
var els = el.style,
//鼠标的 X 和 Y 轴坐标
x = y = 0;
$(el).children(".test").mousedown(function (e) {
console.log(e)
//按下元素后，计算当前鼠标与对象计算后的坐标
x = e.clientX - el.offsetWidth, y = e.clientY - el.offsetHeight;
//在支持 setCapture 做些处理
el.setCapture ? (
//捕捉焦点 与.releaseCapture成对出现
el.setCapture(),
//设置事件
$(el).children(".test").onmousemove = function (ev) {
mouseMove(ev || event)
},
el.onmouseup = mouseUp
) : (
//绑定事件
$(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp)
)
//防止默认事件发生
e.preventDefault()
});
//移动事件
function mouseMove(e) {
// 结束时坐标减去初始坐标，赋值给样式
els.width = e.clientX - x + ‘px‘, //改变宽度
els.height = e.clientY - y + ‘px‘ //改变高度
}
//停止事件
function mouseUp() {
//在支持 releaseCapture 做些处理
el.releaseCapture ? (
//释放焦点
el.releaseCapture(),
//移除事件
el.onmousemove = el.onmouseup = null
) : (
//卸载事件
$(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)
)
}
// 移除创建的元素
$(document).on(‘click‘, ‘.link-box-area span‘, function(){
$(this).parent().remove();
})
}
})
})
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/wxyblog/p/11977783.html
时间： 2024-08-10 23:44:46