js,拖拽,javascript,拖拽大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小，所以我给它设定一个范围，当点击这个范围时表明我们想要改变它的大小 
当我们点击方块的这些红色区域时，方快就知道我们想要改变它的大小 代码实现： // 获取event对象，兼容性写法 var ev = ev || event; // 鼠标按下时的位置 var mouseDownX = ev.clientX; var mouseDownY = ev.clientY; // 方块上下左右四个边的位置和方块的长宽 var T0 = this.offsetTop; var B0 = this.offsetTop + this.offsetHeight; var L0 = this.offsetLeft; var R0 = this.offsetLeft + this.offsetWidth; var W = this.offsetWidth; var H = this.offsetHeight; // 设置方块的识别范围 var areaT = T0 + 10; var areaB = B0 - 10; var areaL = L0 + 10; var areaR = R0 - 10; 其中areaT、areaB、areaL、areaR就是红色的区域 接下来方块知道我们想要改变它的大小了，但是要怎么改变，朝哪种方向改变大小。所以要判断改变大小的方向 代码实现： // 判断改变方块的大小的方向 // 左 var changeL = mouseDownX < areaL; // 右 var changeR = mouseDownX > areaR; // 上 var changeT = mouseDownY < areaT; // 下 var changeB = mouseDownY > areaB; 接下来就是最重要的改变样式了 代码实现： //根据改变方块大小的方向不同进行大小的改变 // 左 if(changeL){ oDiv.style.width = (mouseDownX - mouseMoveX) + W + 'px'; oDiv.style.left = L0 - (mouseDownX - mouseMoveX) + 'px'; } // 右 if(changeR){ oDiv.style.width = (mouseMoveX - mouseDownX) + W + 'px'; } // 上 if(changeT){ oDiv.style.height = (mouseDownY - mouseMoveY) + H + 'px'; oDiv.style.top = T0 - (mouseDownY - mouseMoveY) + 'px'; } // 下 if(changeB){ oDiv.style.height = (mouseMoveY - mouseDownY) + H +'px'; }注意：在改变左侧和上侧时要同时修改方块的位置，不然会出现拖左侧边而右侧边位置扩大的现象（拖动上侧边下侧边位置变大） 代码优化 未优化前的代码： var oDiv = document.getElementById('div1'); oDiv.onmousedown = function(ev){ // 获取event对象，兼容性写法 var ev = ev || event; // 鼠标按下时的位置 var mouseDownX = ev.clientX; var mouseDownY = ev.clientY; // 方块上下左右四个边的位置和方块的长宽 var T0 = this.offsetTop; var B0 = this.offsetTop + this.offsetHeight; var L0 = this.offsetLeft; var R0 = this.offsetLeft + this.offsetWidth; var W = this.offsetWidth; var H = this.offsetHeight; // 设置方块的识别范围 var areaT = T0 + 10; var areaB = B0 - 10; var areaL = L0 + 10; var areaR = R0 - 10; // 判断改变方块的大小的方向 // 左 var changeL = mouseDownX < areaL; // 右 var changeR = mouseDownX > areaR; // 上 var changeT = mouseDownY < areaT; // 下 var changeB = mouseDownY > areaB; oDiv.onmousemove = function(ev){ var ev = ev || event; // 鼠标移动时的鼠标位置 var mouseMoveX = ev.clientX; var mouseMoveY = ev.clientY; //根据改变方块大小的方向不同进行大小的改变 // 左 if(changeL){ oDiv.style.width = (mouseDownX - mouseMoveX) + W + 'px'; oDiv.style.left = L0 - (mouseDownX - mouseMoveX) + 'px'; } // 右 if(changeR){ oDiv.style.width = (mouseMoveX - mouseDownX) + W + 'px'; } // 上 if(changeT){ oDiv.style.height = (mouseDownY - mouseMoveY) + H + 'px'; oDiv.style.top = T0 - (mouseDownY - mouseMoveY) + 'px'; } // 下 if(changeB){ oDiv.style.height = (mouseMoveY - mouseDownY) + H +'px'; } // 限定范围 if(parseInt(oDiv.style.width) < 50){ oDiv.style.width = 50 + 'px'; } if(parseInt(oDiv.style.height) < 50){ oDiv.style.height = 50 + 'px'; } } oDiv.onmouseup = function(){ oDiv.onmousemove = null; } }这段代码现在主要有两个问题： 1、当鼠标移动过快移出方块时，就不能够继续改变元素的大小了 解决方案：把onmousemove事件和onmouseup事件绑定到document对象上 2、当方块中有文字时，拖拽改变方块大小时会触发浏览器默认的原生拖放行为 解决方案：1、阻止浏览器的默认行为（IE8浏览器除外） 在onmousedown中添加语句 return false 2、设置全局捕获（IE8） 在onmousedown中设置全局捕获 在onmouseup中取消全局捕获 优化后的代码： <div id="div1">adfadsf</div> <script type="text/javascript"> var oDiv = document.getElementById('div1'); oDiv.onmousedown = function(ev){ // 获取event对象，兼容性写法 var ev = ev || event; // 鼠标按下时的位置 var mouseDownX = ev.clientX; var mouseDownY = ev.clientY; // 方块上下左右四个边的位置和方块的长宽 var T0 = this.offsetTop; var B0 = this.offsetTop + this.offsetHeight; var L0 = this.offsetLeft; var R0 = this.offsetLeft + this.offsetWidth; var W = this.offsetWidth; var H = this.offsetHeight; // 设置方块的识别范围 var areaT = T0 + 10; var areaB = B0 - 10; var areaL = L0 + 10; var areaR = R0 - 10; // 判断改变方块的大小的方向 // 左 var changeL = mouseDownX < areaL; // 右 var changeR = mouseDownX > areaR; // 上 var changeT = mouseDownY < areaT; // 下 var changeB = mouseDownY > areaB; // IE8 取消默认行为-设置全局捕获 if(oDiv.setCapture){ oDiv.setCapture(); } document.onmousemove = function(ev){ var ev = ev || event; // 鼠标移动时的鼠标位置 var mouseMoveX = ev.clientX; var mouseMoveY = ev.clientY; //根据改变方块大小的方向不同进行大小的改变 // 左 if(changeL){ oDiv.style.width = (mouseDownX - mouseMoveX) + W + 'px'; oDiv.style.left = L0 - (mouseDownX - mouseMoveX) + 'px'; } // 右 if(changeR){ oDiv.style.width = (mouseMoveX - mouseDownX) + W + 'px'; } // 上 if(changeT){ oDiv.style.height = (mouseDownY - mouseMoveY) + H + 'px'; oDiv.style.top = T0 - (mouseDownY - mouseMoveY) + 'px'; } // 下 if(changeB){ oDiv.style.height = (mouseMoveY - mouseDownY) + H +'px'; } // 限定范围 if(parseInt(oDiv.style.width) < 50){ oDiv.style.width = 50 + 'px'; } if(parseInt(oDiv.style.height) < 50){ oDiv.style.height = 50 + 'px'; } } document.onmouseup = function(){ document.onmousemove = null; // 释放全局捕获 if(oDiv.releaseCapture){ oDiv.releaseCapture(); } } return false; }以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持wanshiok.com！
js,拖拽,javascript,拖拽
|
