JavaScript實現拖拽和縮放效果
本文實例為大家分享了JavaScript實現拖拽和縮放效果的具體代碼，供大家參考，具體內容如下
<!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;// 鼠標按下記錄相對位置// 水平方向都距離 = 當前鼠標左邊的距離 - 被拖拽元素距離左邊的距離var offsetX = e.clientX - node.offsetLeft;// 垂直方向都距離 = 當前鼠標都上邊的距離 - 被拖拽元素距離距離的距離var offsetY = e.clientY - node.offsetTop;// 鼠標移動和被拖拽的元素是相對的 這里是鼠標拖拽的物體在整個頁面上移動 所以// move加在document上document.onmousemove = function (ev) { // 當前鼠標的事件對象 var e = ev || window.event; // 定義 currentLeft = 當前鼠標位置 - 距離左邊的距離 var currentLeft = e.clientX - offsetX; // 定義 currentTop = 當前鼠標上邊位置 - 距離上邊的距離 var currentTop = e.clientY - offsetY // 限制左出界 最左是 0 if (currentLeft <= 0) { currentLeft = 0; } // 當前窗口的寬 瀏覽器兼容 var windowWidth = document.documentElement.clientWidth || document.body.clientWidth; // 限制右邊出界 如果大于當前窗口的寬 那么就讓它等于當前窗口的寬減去當前元素的offsetWidth 也就是留在原地 if (currentLeft >= windowWidth - node.offsetWidth) { currentLeft = windowWidth - node.offsetWidth; } // 設置上出界 最上邊是 0 if (currentTop <= 0) { currentTop = 0; } // 當前窗口的高 瀏覽器兼容 var windowHeight = document.documentElement.clientHeight || document.body.clientHeight; // 限制下邊出界 如果大于當前窗口的高 減去 本身的高 那么就讓它等于 當前窗口的高減去本身的高 if (currentTop >= windowHeight - node.offsetHeight) { currentTop = windowHeight - node.offsetHeight; } // 當前被拖拽元素的 left 值 等于上面計算出的 currentLeft node.style.left = currentLeft + ’px’; // 當前被拖拽元素的 top 值 等于上面計算出的 currentTop node.style.top = currentTop + ’px’;} } // 鼠標彈起取消拖拽 這里添加到 node 元素對象也可以的 document.onmouseup = function () {document.onmousemove = null; } } // 縮放 function scaleTool(drag, scale, box) { scale.onmousedown = function (e) {//阻止冒泡 避免縮放觸發移動事件e.stopPropagation()// 取消事件的默認動作e.preventDefault()// 定義positionvar position = { ’w’: drag.offsetWidth, // 被縮放元素的offsetWidth ’h’: drag.offsetHeight, // 被縮放元素的offsetHeight ’x’: e.clientX, // 當前窗口鼠標指針的水平坐標 ’y’: e.clientY, // 當前窗口鼠標指針的垂直坐標}drag.onmousemove = function (ev) { ev.preventDefault() // 設置最大縮放為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) // 設置最大的寬高 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’;}// 鼠標離開和抬起取消縮放drag.onmouseup = function () { drag.onmousemove = null; drag, onmouseup = null;}drag.onmouseleave = function () { drag.onmousemove = null; drag, onmouseup = null;} } } }</script></html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
1. Python使用oslo.vmware管理ESXI虛擬機的示例參考2. Jsp servlet驗證碼工具類分享3. .NET6打包部署到Windows Service的全過程4. python GUI庫圖形界面開發之PyQt5滑塊條控件QSlider詳細使用方法與實例5. IntelliJ IDEA 好用插件之analyze inspect code詳解6. JetBrains IntelliJ IDEA 配置優化技巧7. idea2020.1無法自動加載maven依賴的jar包問題及解決方法8. PHP程序員簡單的開展服務治理架構操作詳解(一)9. vue項目中使用bpmn為節點添加顏色的方法10. 解決idea update project 更新選項消失的問題
網公網安備