H5拖拽事件-- 自定义创建a标签热区

zoukankan html css js c++ java

H5拖拽事件-- 自定义创建a标签热区
有一个BUG未更正,

1.当窗口为自适应时,定位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{ 100px; height: 100px; position: fixed; top: 0; left: 50%; border: 1px solid; } .test{ 10px; height: 10px; overflow: hidden; cursor: se-resize; position: absolute; right: 0; bottom: 0; background-color: #000000; } .div01.boder{ border:3px solid; } .warp{ 100%; overflow: hidden; } </style> </head> <body> <div id="zt"> <div class="warp"> </div> </div> <script> $(function () { //第一部分，动态添加可移动div节点 $("#zt").prepend(`创建可移动按钮`); $("#zt").on("click", ".add_a_btn", function(){ $(".warp").append(` <div class="div01 link-box-area" draggable="true"> <a href="">编辑链接</a> <div class="test"></div> × </div> `); //每次添加，遍历每个节点挂载触发函数 $('.div01').each((i,e) =>{ bindResize($('.div01')[i]); Drag($('.div01')[i]) }) //H5拖拽封装 function Drag(divDrag){ // 第二部分，拖拽事件 // 生命周期 // 1.鼠标按下，拖拽开始 // 2.移动鼠标，拖拽中 // 3.松开鼠标，拖拽结束 var startX = 0; //拖拽开始的坐标初始化 var startY = 0; var starsetY= 0; //鼠标位于div内的y轴位置初始化 console.log(divDrag.offsetTop) divDrag.ondragstart = function(event){ //按下的时候必须移动一下 var event = event || window.event; console.log(event) console.log('拖拽开始') $(this).addClass('boder'); //拖拽时候的样式 startX = event.clientX; //将开始拖拽时候的坐标赋值 startY = event.clientY; starsetY= event.offsetY //鼠标位于div内的y轴位置 } divDrag.ondrag = function(){ //鼠标按下了以后，只要移动一下，这个事件就一直处于触发中 console.log('移动中'); console.log(event) } divDrag.ondragend = function(){ console.log('结束'); $(this).removeClass('boder'); //移除拖拽时的样式 var x = event.clientX - startX; //结束时候的坐标减去开始时候的坐标，等于移动的距离 var y = event.clientY - startY; this.style.position = 'absolute'; //滚轮高度+div离屏幕的距离 - 鼠标在div内的y轴距离 = 拖拽后的top值 this.style.top = window.scrollY+event.clientY-starsetY+"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>
<!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{ 100px; height: 100px; position: fixed; top: 0; left: 50%; border: 1px solid; } .test{ 10px; height: 10px; overflow: hidden; cursor: se-resize; position: absolute; right: 0; bottom: 0; background-color: #000000; } .div01.boder{ border:3px solid; } .warp{ 100%; overflow: hidden; } </style> </head> <body> <div id="zt"> <div class="warp"> </div> </div>
<script>$(function () { //第一部分，动态添加可移动div节点 $("#zt").prepend(`创建可移动按钮`); $("#zt").on("click", ".add_a_btn", function(){
$(".warp").append(` <div class="div01 link-box-area" draggable="true"> <a href="">编辑链接</a> <div class="test"></div> × </div> `); //每次添加，遍历每个节点挂载触发函数 $('.div01').each((i,e) =>{ bindResize($('.div01')[i]); Drag($('.div01')[i]) }) //H5拖拽封装 function Drag(divDrag){ // 第二部分，拖拽事件 // 生命周期 // 1.鼠标按下，拖拽开始 // 2.移动鼠标，拖拽中 // 3.松开鼠标，拖拽结束 var startX = 0; //拖拽开始的坐标初始化 var startY = 0; var starsetY= 0; //鼠标位于div内的y轴位置初始化 console.log(divDrag.offsetTop) divDrag.ondragstart = function(event){ //按下的时候必须移动一下 var event = event || window.event; console.log(event) console.log('拖拽开始') $(this).addClass('boder'); //拖拽时候的样式 startX = event.clientX; //将开始拖拽时候的坐标赋值 startY = event.clientY; starsetY= event.offsetY //鼠标位于div内的y轴位置 } divDrag.ondrag = function(){ //鼠标按下了以后，只要移动一下，这个事件就一直处于触发中 console.log('移动中'); console.log(event) } divDrag.ondragend = function(){ console.log('结束'); $(this).removeClass('boder'); //移除拖拽时的样式 var x = event.clientX - startX; //结束时候的坐标减去开始时候的坐标，等于移动的距离 var y = event.clientY - startY; this.style.position = 'absolute'; //滚轮高度+div离屏幕的距离 - 鼠标在div内的y轴距离 = 拖拽后的top值 this.style.top = window.scrollY+event.clientY-starsetY+"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>
查看全文

相关阅读:
【python】10分钟教你用python打造贪吃蛇超详细教程
 盘点下那些年我们用过的编程工具IDE都有哪些
 帝国竞争算法(imperialist competitive algorithm, ICA )详解+Java代码实现
 10分钟教你使用Picgo+GitHub+ jsDelivr搭建CDN加速免费图床
 10分钟了解代码命名规范（Java、Python）
什么是算法？从枚举到贪心再到启发式（下）-终于有人把邻域搜索讲清了！
番茄路径优化系统介绍-专注于算法与路径优化VRP
什么是算法？从枚举到贪心再到启发式（上）
10分钟教你用Python打造学生成绩管理系统
 10分钟教你用Python中的Matplotlib绘制多图并合并展示

原文地址：https://www.cnblogs.com/wxyblog/p/11977783.html

H5拖拽事件-- 自定义创建a标签热区

有一个BUG未更正,

1.当窗口为自适应时,定位left为百分比,窗口改变大小时会存在定位偏差