JavaScript 滑鼠拖拽div 改變其大小
阿新 • • 發佈：2018-12-22
轉自： http://www.cnblogs.com/yushang/archive/2013/03/19/2968782.html
想讓div實現拖拽改變大小功能，類似於soso地圖（即現在的騰訊地圖）的看街景時地圖可以拖拽等功能
分析一下，實現這個功能需要：滑鼠按下，滑鼠移動和滑鼠擡起幾個功能方能實現，那麼找到相應的js事件：mousedown、mousemove、mouseup
找到這幾個事件，基本上我們的功能可以說完成了一半了，只需要在裡面做相應事件處理就能搞定了，具體看下程式碼，很簡單的操作：
拖拽div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <div id="StreetOverviewFrame" tabindex="-1" style="position: absolute; right: 10px; bottom: 10px; z-index: 200; overflow: hidden; visibility: visible; width: 771px; height: 150px;background-color:Red;"> <div id="mapContainer" style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px;"> </div> <div id="tz" style="position: absolute; left: 1px; top: 1px; width: 28px; height: 28px; cursor: se-resize; z-index: 200001; background-image: url("about:blank");"> <div title="拖動調整大小" style="position: absolute; left: 0px; top: 0px; width: 27px; height: 20px; cursor: se-resize; z-index: 100; background-image: url("http://s.map.soso.com/themes/default/img/street/overview_control.png?v=v3.3.805"); background-position: 0px 0px;"> </div> </div> </div> <script type="text/javascript" src="/Js/mobile/jquery.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script> <script type="text/javascript"> var obj = null; var divObj = null; var deltaX, deltaY,_startX,_startY; $(document).ready(function () { obj = document.getElementById("tz"); divObj = document.getElementById("StreetOverviewFrame"); obj.addEventListener('mousedown', function (event) { //將滑鼠位置轉為文件座標 var scroll = getScrollOffsets(); var startX = event.clientX + scroll.x; var startY = event.clientY + scroll.y; _startX = parseInt(startX); _startY = parseInt(startY); if (document.addEventListener) { document.addEventListener("mousemove", moveHandler, true); document.addEventListener("mouseup", upHandler, true); } else if (document.attachEvent) { obj.setCapture(); obj.attachEvent("onlosecapeture", upHandler); obj.attachEvent("onmouseup", upHandler); obj.attachEvent("onmousemove", moveHandler); } //處理了這個事件，不讓任何其它元素看到它 if (event.stopPropagation) event.stopPropagation(); //標準模型 else event.cancelBubble = true; //現在阻止任何預設操作 if (event.preventDefault) event.preventDefault(); else event.returnValue = false; }); MapInIt(); $("#StreetOverviewFrame").mouseover(function () { navControl.show(); }).mouseout(function () { navControl.hide(); }); }); function moveHandler(e) { if (!e) e = window.event; //ie事件模型 var startX =parseInt(e.clientX); var startY =parseInt(e.clientY); deltaX = startX - _startX; deltaY = startY - _startY; if (_startX > startX) { divObj.style.width = ($("#StreetOverviewFrame").width() - deltaX) + "px"; } else { divObj.style.width = ($("#StreetOverviewFrame").width() - deltaX) + "px"; } if (_startY > startY) { divObj.style.height = ($("#StreetOverviewFrame").height() - deltaY) + "px"; } else { divObj.style.height = ($("#StreetOverviewFrame").height() - deltaY) + "px"; } _startX = startX; _startY = startY; if (e.stopPropagation) e.stopPropagation(); //標準模型 else e.cancelBubble = true; } function upHandler(e) { if (!e) e = window.event; //ie事件模型 //登出捕獲事件處理程式 if (document.removeEventListener) { document.removeEventListener("mousemove", moveHandler, true); document.removeEventListener("mouseup", upHandler, true); } else if (document.detachEvent) { obj.detachEvent("onlosecapeture", upHandler); obj.detachEvent("onmouseup", upHandler); obj.detachEvent("onmousemove", moveHandler); obj.releaseCapture(); } if (e.stopPropagation) e.stopPropagation(); //標準模型 else e.cancelBubble = true; } //以一個物件的x和y屬性的方式返回滾動條的偏移量 function getScrollOffsets(w) { // 使用指定的視窗，如果不帶引數則使用當前視窗 w = w || window; // 除了IE8及更早的版本以外，其它瀏覽器版本都能用 if (w.pageXOffset != null) return { x: w.pageXOffset, y: w.pageYOffset }; // 對標準模式下的IE（或任何瀏覽器） var d = w.document; if (document.compatMode == "CSS1Compat") return { x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop }; //對怪異模式下的瀏覽器 return { x: d.body.scrollLeft, y: d.body.scrollTop }; } var navControl = null; //初始化地圖 function MapInIt() { map = new BMap.Map("mapContainer"); var point = new BMap.Point(121.1234, 31.1234); map.centerAndZoom(point, 12); navControl = new BMap.NavigationControl(); map.addControl(navControl); //新增導航條 map.addControl(new BMap.ScaleControl()); //新增比例尺控制元件 //地圖慣性拖拽 map.enableInertialDragging(); //地圖滾輪 map.enableScrollWheelZoom(); } </script> </body> </html>
這一篇部落格是在普通的html中實現了此功能，本人借鑑此部落格在前端vue框架的頁面下實現了類似功能，稍加修改：
見本人部落格：https://blog.csdn.net/acoolgiser/article/details/84866576