转自: 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框架的页面下实现了类似功能,稍加修改: