DDR爱好者之家 Design By 杰米
本文实例为大家分享了js实现拖拽移动与缩放效果的具体代码,供大家参考,具体内容如下
效果图如下-实现了简单的拖拽和缩放功能
第一步—简单的拖拽功能
// 创建一个MoveClass构造函数 function MoveClass(id, options = {}) { // 绑定ele属性 this.ele = document.querySelector(id); this.move(); }
// 给MoveClass原型上绑定move方法 MoveClass.prototype.move = function () { // ele的鼠标按下事件调用mousedown this.ele.onmousedown = e => { // 获取事件对象 var e = e || window.event; // 鼠标按下时,鼠标相对于元素的x坐标 var x = e.offsetX; // 鼠标按下时,鼠标相对于元素的y坐标 var y = e.offsetY; // 鼠标按下移动时调用mousemove document.onmousemove = e => { // 元素ele移动的距离l var l = e.clientX - x; // 元素ele移动的距离l var t = e.clientY - y; this.ele.style.left = l + "px"; this.ele.style.top = t + "px"; } // 当鼠标弹起时,清空onmousemove与onmouseup document.onmouseup = () => { document.onmousemove = null; document.onmouseup = null; } } } // new一个MoveClass对象 var moveClass = new MoveClass("#box");
效果如下,简单的拖拽
第二步—简单的缩放功能
1.设置方位
// ele的左,左上,左下,右,右上,右下,上,下 MoveClass.prototype.editoptions = { left_top: true, left: true, right: true, top: true, bottom: true, right_top: true, left_bottom: true, right_bottom: true, }
2.给原型绑定缩放的方法
// 给原型绑定缩放的方法 MoveClass.prototype.editEle = function () { // console.log(this.ele.clientWidth,this.ele.clientHeight); // console.log(this.ele.offsetLeft,this.ele.offsetTop); var that = this; // 创建一个div var div = document.createElement("div"); // 遍历this.editoptions for (let attr in this.editoptions) { if (this.editoptions[attr]) { // 循环创建左,左上,左下,右,右上,右下,上,下方位的小点 var dian = document.createElement("div"); dian.className = "dian " + attr; // 设置类型为对应的attr dian.dataset.type = attr; // 当按下对应方位的小点时 dian.onmousedown = e => { var e = e || window.event; // 先获取鼠标距离屏幕的left与top值 var clientXY = { x: e.clientX, y: e.clientY } // 获取鼠标按下时ele的宽高 var eleWH = { width: this.ele.clientWidth, height: this.ele.clientHeight, } // 阻止事件冒泡(针对父元素的move) e.stopPropagation(); // 通过e.target获取精准事件源对应的type值 var type = e.target.dataset.type; // 鼠标按下对应方位小点移动时,调用mousemove document.onmousemove = function (e) { // 查找type中是否包含”right“ if (type.indexOf('right') > -1) { // console.log("right"); // 如果拖拽后的宽度小于最小宽度,就return出去 if (that.options.minWidth > eleWH.width + e.clientX - clientXY.x) { return; } // ele拖拽后的宽度为:初始width+拖拽后鼠标距离屏幕的距离 - 第一次按下时鼠标距离屏幕的距离 that.ele.style.width = (eleWH.width + e.clientX - clientXY.x) + "px"; } // 与”right“相同原理 if (type.indexOf("bottom") > -1) { // console.log("bottom"); if (that.options.minHeight > eleWH.height + e.clientY - clientXY.y) { return; } that.ele.style.height = (eleWH.height + e.clientY - clientXY.y) + "px" } if (type.indexOf("top") > -1) { // console.log("top"); if (that.options.minHeight > eleWH.height - e.clientY + clientXY.y) { return; } // ele拖拽后的高度为:初始height-拖拽后鼠标距离屏幕的距离 + 第一次按下时鼠标距离屏幕的距离 that.ele.style.height = (eleWH.height - e.clientY + clientXY.y) + "px"; // 重新设置ele的top值为此时鼠标距离屏幕的y值 that.ele.style.top = e.clientY + "px"; } // 与”top“相同原理 if (type.indexOf("left") > -1) { // console.log("left"); if (that.options.minWidth > eleWH.width - e.clientX + clientXY.x) { return; } that.ele.style.width = (eleWH.width - e.clientX + clientXY.x) + "px"; // 重新设置ele的left值为此时鼠标距离屏幕的x值 that.ele.style.left = e.clientX + "px"; } } document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; } } } // 将类名为”dian“的div添加到div中 div.appendChild(dian); } // 为div设置类名 div.className = "kuang" // 将类名为”kuang“的div添加到ele中 this.ele.appendChild(div); }
效果图如下
最终效果,盒子可以拖动,可以缩放。
盒子上的8个小点采用定位放上去的,事先写好了样式
<style> * { margin: 0; padding: 0; } #box { width: 100px; height: 100px; background: orange; position: absolute; left: 100px; top: 100px; } .kuang { box-sizing: border-box; border: 1px solid #0f0; width: 100%; height: 100%; position: relative; } .kuang .dian { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #0f0; } .left_top { left: -5px; top: -5px; } .right_top { right: -5px; top: -5px; } .left_bottom { left: -5px; bottom: -5px; } .right_bottom { right: -5px; bottom: -5px; } .top { top: -5px; left: 50%; transform: translateX(-50%); } .bottom { bottom: -5px; left: 50%; transform: translateX(-50%); } .left { left: -5px; top: 50%; transform: translateY(-50%); } .right { right: -5px; top: 50%; transform: translateY(-50%); } </style>
<body> <div id="box" class="border"></div> </body>
所有的代码能直接粘贴使用。缩放的原理其实就是鼠标按下去时,获取当前的鼠标位置和盒子的宽高,鼠标按下并移动后获取此时的鼠标位置。
拖拽后的宽高=初始宽高+(拖拽后鼠标距离屏幕的位置 - 第一次按下时鼠标距离屏幕的位置)。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年12月25日
2024年12月25日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]