Js 鼠标拖拽div改变其大小
想让div实现拖拽改变大小功能，类似于soso地图的看街景时地图可以拖拽等功能
分析一下，实现这个功能需要：鼠标按下，鼠标移动和鼠标抬起几个功能方能实现，那么找到相应的js事件：mousedown、mousemove、mouseup
找到这几个事件，基本上我们的功能可以说完成了一半了，只需要在里面做相应事件处理就能搞定了，具体看下代码，很简单的操作：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head runat="server"> 5 <title></title> 6 </head> 7 <body> 8 <div id="StreetOverviewFrame" tabindex="-1" style="position: absolute; right: 10px; bottom: 10px; 9 z-index: 200; overflow: hidden; visibility: visible; width: 771px; height: 150px;background-color:Red;"> 10 <div id="mapContainer" style="position: absolute; width: 100%; height: 100%; top: 0px; 11 left: 0px;"> 12 </div> 13 <div id="tz" style="position: absolute; left: 1px; top: 1px; width: 28px; height: 28px; cursor: se-resize; 14 z-index: 200001; background-image: url("about:blank");"> 15 <div title="拖动调整大小" style="position: absolute; left: 0px; top: 0px; width: 27px; 16 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"); 17 background-position: 0px 0px;"> 18 </div> 19 </div> 20 </div> 21 <script type="text/javascript" src="/Js/mobile/jquery.js"></script> 22 <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script> 23 <script type="text/javascript"> 24 var obj = null; 25 var divObj = null; 26 var deltaX, deltaY,_startX,_startY; 27 $(document).ready(function () { 28 obj = document.getElementById("tz"); 29 divObj = document.getElementById("StreetOverviewFrame"); 30 31 obj.addEventListener(\'mousedown\', function (event) { 32 //将鼠标位置转为文档坐标 33 var scroll = getScrollOffsets(); 34 var startX = event.clientX + scroll.x; 35 var startY = event.clientY + scroll.y; 36 37 _startX = parseInt(startX); 38 _startY = parseInt(startY); 39 if (document.addEventListener) { 40 document.addEventListener("mousemove", moveHandler, true); 41 document.addEventListener("mouseup", upHandler, true); 42 } else if (document.attachEvent) { 43 obj.setCapture(); 44 obj.attachEvent("onlosecapeture", upHandler); 45 obj.attachEvent("onmouseup", upHandler); 46 obj.attachEvent("onmousemove", moveHandler); 47 48 } 49 50 //处理了这个事件，不让任何其它元素看到它 51 if (event.stopPropagation) event.stopPropagation(); //标准模型 52 else event.cancelBubble = true; 53 54 //现在阻止任何默认操作 55 if (event.preventDefault) event.preventDefault(); 56 else event.returnValue = false; 57 }); 58 59 MapInIt(); 60 61 $("#StreetOverviewFrame").mouseover(function () { 62 navControl.show(); 63 }).mouseout(function () { 64 navControl.hide(); 65 }); 66 }); 67 68 function moveHandler(e) { 69 if (!e) e = window.event; //ie事件模型 70 var startX =parseInt(e.clientX); 71 var startY =parseInt(e.clientY); 72 73 deltaX = startX - _startX; 74 deltaY = startY - _startY; 75 if (_startX > startX) { 76 divObj.style.width = ($("#StreetOverviewFrame").width() - deltaX) + "px"; 77 } else { 78 divObj.style.width = ($("#StreetOverviewFrame").width() - deltaX) + "px"; 79 } 80 81 if (_startY > startY) { 82 divObj.style.height = ($("#StreetOverviewFrame").height() - deltaY) + "px"; 83 } else { 84 divObj.style.height = ($("#StreetOverviewFrame").height() - deltaY) + "px"; 85 } 86 _startX = startX; 87 _startY = startY; 88 if (e.stopPropagation) e.stopPropagation(); //标准模型 89 else e.cancelBubble = true; 90 } 91 92 function upHandler(e) { 93 if (!e) e = window.event; //ie事件模型 94 //注销捕获事件处理程序 95 if (document.removeEventListener) { 96 document.removeEventListener("mousemove", moveHandler, true); 97 document.removeEventListener("mouseup", upHandler, true); 98 } else if (document.detachEvent) { 99 obj.detachEvent("onlosecapeture", upHandler); 100 obj.detachEvent("onmouseup", upHandler); 101 obj.detachEvent("onmousemove", moveHandler); 102 obj.releaseCapture(); 103 } 104 105 106 if (e.stopPropagation) e.stopPropagation(); //标准模型 107 else e.cancelBubble = true; 108 } 109 110 //以一个对象的x和y属性的方式返回滚动条的偏移量 111 function getScrollOffsets(w) { 112 // 使用指定的窗口，如果不带参数则使用当前窗口 113 w = w || window; 114 // 除了IE8及更早的版本以外，其它浏览器版本都能用 115 if (w.pageXOffset != null) return { x: w.pageXOffset, y: w.pageYOffset }; 116 117 // 对标准模式下的IE（或任何浏览器） 118 var d = w.document; 119 if (document.compatMode == "CSS1Compat") 120 return { x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop }; 121 122 //对怪异模式下的浏览器 123 return { x: d.body.scrollLeft, y: d.body.scrollTop }; 124 } 125 var navControl = null; 126 //初始化地图 127 function MapInIt() { 128 map = new BMap.Map("mapContainer"); 129 var point = new BMap.Point(121.1234, 31.1234); 130 map.centerAndZoom(point, 12); 131 navControl = new BMap.NavigationControl(); 132 map.addControl(navControl); //添加导航条 133 map.addControl(new BMap.ScaleControl()); //添加比例尺控件 134 //地图惯性拖拽 135 map.enableInertialDragging(); 136 //地图滚轮 137 map.enableScrollWheelZoom(); 138 } 139 140 </script> 141 </body> 142 </html>
版权声明：本文为yushang原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。