Js 鼠标拖拽div改变其大小

想让div实现拖拽改变大小功能,类似于soso地图的看街景时地图可以拖拽等功能

Js 鼠标拖拽div改变其大小

分析一下,实现这个功能需要:鼠标按下,鼠标移动和鼠标抬起几个功能方能实现,那么找到相应的js事件:mousedown、mousemove、mouseup

找到这几个事件,基本上我们的功能可以说完成了一半了,只需要在里面做相应事件处理就能搞定了,具体看下代码,很简单的操作:

拖拽div
  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(&quot;about:blank&quot;);">

 15             <div title="拖动调整大小" style="position: absolute; left: 0px; top: 0px; width: 27px;

 16                 height: 20px; cursor: se-resize; z-index: 100; background-image: url(&quot;http://s.map.soso.com/themes/default/img/street/overview_control.png?v=v3.3.805&quot;);

 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>

 

 

你可能感兴趣的:(div)