JavaScript實(shí)現(xiàn)拖拽和縮放效果
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)拖拽和縮放效果的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html><html><head> <meta charset='utf-8' /> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>拖拽縮放</title> <meta name='viewport' content='width=device-width, initial-scale=1'></head><style> * { margin: 0; padding: 0 } #box { width: 100%; height: 100%; position: relative; background: #4bb0bb } #drag { width: 200px; height: 200px; position: relative; background: #691fff; cursor: move; } #scale { width: 20px; height: 20px; position: absolute; background: #ffa500; cursor: se-resize; right: 0; bottom: 0; overflow: hidden; }</style><body> <div id='box'> <div id='drag'> <div id='scale'></div> </div> </div></body><script> window.onload = function () { var box = document.getElementById('box') var drag = document.getElementById('drag') var scale = document.getElementById('scale') // mousedown mousemove mouseup dragTool(drag) scaleTool(drag, scale, box) // 拖拽方法 function dragTool(node) { node.onmousedown = function (ev) {// 瀏覽器兼容處理var e = ev || window.event;// 鼠標(biāo)按下記錄相對(duì)位置// 水平方向都距離 = 當(dāng)前鼠標(biāo)左邊的距離 - 被拖拽元素距離左邊的距離var offsetX = e.clientX - node.offsetLeft;// 垂直方向都距離 = 當(dāng)前鼠標(biāo)都上邊的距離 - 被拖拽元素距離距離的距離var offsetY = e.clientY - node.offsetTop;// 鼠標(biāo)移動(dòng)和被拖拽的元素是相對(duì)的 這里是鼠標(biāo)拖拽的物體在整個(gè)頁(yè)面上移動(dòng) 所以// move加在document上document.onmousemove = function (ev) { // 當(dāng)前鼠標(biāo)的事件對(duì)象 var e = ev || window.event; // 定義 currentLeft = 當(dāng)前鼠標(biāo)位置 - 距離左邊的距離 var currentLeft = e.clientX - offsetX; // 定義 currentTop = 當(dāng)前鼠標(biāo)上邊位置 - 距離上邊的距離 var currentTop = e.clientY - offsetY // 限制左出界 最左是 0 if (currentLeft <= 0) { currentLeft = 0; } // 當(dāng)前窗口的寬 瀏覽器兼容 var windowWidth = document.documentElement.clientWidth || document.body.clientWidth; // 限制右邊出界 如果大于當(dāng)前窗口的寬 那么就讓它等于當(dāng)前窗口的寬減去當(dāng)前元素的offsetWidth 也就是留在原地 if (currentLeft >= windowWidth - node.offsetWidth) { currentLeft = windowWidth - node.offsetWidth; } // 設(shè)置上出界 最上邊是 0 if (currentTop <= 0) { currentTop = 0; } // 當(dāng)前窗口的高 瀏覽器兼容 var windowHeight = document.documentElement.clientHeight || document.body.clientHeight; // 限制下邊出界 如果大于當(dāng)前窗口的高 減去 本身的高 那么就讓它等于 當(dāng)前窗口的高減去本身的高 if (currentTop >= windowHeight - node.offsetHeight) { currentTop = windowHeight - node.offsetHeight; } // 當(dāng)前被拖拽元素的 left 值 等于上面計(jì)算出的 currentLeft node.style.left = currentLeft + ’px’; // 當(dāng)前被拖拽元素的 top 值 等于上面計(jì)算出的 currentTop node.style.top = currentTop + ’px’;} } // 鼠標(biāo)彈起取消拖拽 這里添加到 node 元素對(duì)象也可以的 document.onmouseup = function () {document.onmousemove = null; } } // 縮放 function scaleTool(drag, scale, box) { scale.onmousedown = function (e) {//阻止冒泡 避免縮放觸發(fā)移動(dòng)事件e.stopPropagation()// 取消事件的默認(rèn)動(dòng)作e.preventDefault()// 定義positionvar position = { ’w’: drag.offsetWidth, // 被縮放元素的offsetWidth ’h’: drag.offsetHeight, // 被縮放元素的offsetHeight ’x’: e.clientX, // 當(dāng)前窗口鼠標(biāo)指針的水平坐標(biāo) ’y’: e.clientY, // 當(dāng)前窗口鼠標(biāo)指針的垂直坐標(biāo)}drag.onmousemove = function (ev) { ev.preventDefault() // 設(shè)置最大縮放為30*30 Math.max取最大值 var w = Math.max(30, ev.clientX - position.x + position.w) var h = Math.max(30, ev.clientY - position.y + position.h) // 設(shè)置最大的寬高 w = w >= box.offsetWidth - drag.offsetLeft ? box.offsetWidth - drag.offsetLeft : w; h = h >= box.offsetHeight - drag.offsetTop ? box.offsetHeight - drag.offsetTop : h; drag.style.width = w + ’px’; drag.style.height = h + ’px’;}// 鼠標(biāo)離開(kāi)和抬起取消縮放drag.onmouseup = function () { drag.onmousemove = null; drag, onmouseup = null;}drag.onmouseleave = function () { drag.onmousemove = null; drag, onmouseup = null;} } } }</script></html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 利用單元測(cè)試對(duì)PHP代碼進(jìn)行檢查2. python如何實(shí)現(xiàn)word批量轉(zhuǎn)HTML3. Java8內(nèi)存模型PermGen Metaspace實(shí)例解析4. python excel和yaml文件的讀取封裝5. python3實(shí)現(xiàn)往mysql中插入datetime類型的數(shù)據(jù)6. moment轉(zhuǎn)化時(shí)間戳出現(xiàn)Invalid Date的問(wèn)題及解決7. python爬蟲(chóng)實(shí)戰(zhàn)之制作屬于自己的一個(gè)IP代理模塊8. Django 權(quán)限管理(permissions)與用戶組(group)詳解9. App啟動(dòng)優(yōu)化-Android性能優(yōu)化10. 詳解docker pull 下來(lái)的鏡像都存到了哪里
網(wǎng)公網(wǎng)安備