今天要解决个问题,核心技术就是一个可拖动的DIV,主要参照了个例子:点击打开链接和点击打开链接,但是这个浏览器不兼容,本人做了一部分完善,这里贡献出来,供给大家参考。
<!DOCTYPE html>
<html><head>
<title>Test</title>
<style type="text/css" >
html,body
{
height:100%;
width:100%;
padding:0;
margin:0;
}
.dialog
{
width:250px;
height:250px;
position:absolute;
background-color:#ccc;
-webkit-box-shadow:1px 1px 3px #292929;
-moz-box-shadow:1px 1px 3px #292929;
box-shadow:1px 1px 3px #292929;
margin:10px;
}
.dialog-title
{
color:#fff;
background-color:#404040;
font-size:12pt;
font-weight:bold;
padding:4px 6px;
cursor:move;
}
.dialog-content
{
padding:4px;
}
</style>
</head>
<body>
<div id="dlgTest" class="dialog">
<div class="dialog-title">Dialog</div>
<div class="dialog-content">
This is a draggable test.
</div>
</div>
<script type="text/javascript">
// IE8以及以下不支持addEventListener事件,这里用attachEvent代替。
var Event = {addHandler: function (oElement, sEvent, fnHandler) {
if(oElement.addEventListener) {
oElement.addEventListener(sEvent, fnHandler, false);
} else {
oElement.attachEvent("on" + sEvent, fnHandler);
}
},
removeHandler: function (oElement, sEvent, fnHandler) {
oElement.removeEventListener ? oElement.removeEventListener(sEvent, fnHandler, false) : oElement.detachEvent("on" + sEvent, fnHandler)
}
}
var Dragging=function(validateHandler){ //参数为验证点击区域是否为可移动区域,如果是返回欲移动元素,负责返回null
var draggingObj = null; //dragging Dialog
var diffX=0;
var diffY=0;
function mouseHandler(e){
switch(e.type){
case 'mousedown':
draggingObj = validateHandler(e);//验证是否为可点击移动区域
if(draggingObj != null){
diffX=e.clientX-draggingObj.offsetLeft;
diffY=e.clientY-draggingObj.offsetTop;
}
break;
case 'mousemove':
if(draggingObj){
draggingObj.style.left=(e.clientX-diffX)+'px';
draggingObj.style.top=(e.clientY-diffY)+'px';
}
break;
case 'mouseup':
draggingObj =null;
diffX=0;
diffY=0;
break;
}
};
return {
enable:function(){
Event.addHandler(document, 'mousedown', mouseHandler);
Event.addHandler(document, 'mousemove', mouseHandler);
Event.addHandler(document, 'mouseup', mouseHandler);
},
disable:function(){
Event.removeHandler(document, 'mousedown', mouseHandler);
Event.removeHandler(document, 'mousemove', mouseHandler);
Event.removeHandler(document, 'mouseup', mouseHandler);
}
}
}
/**
* 获取要执行的对象
**/
function getDraggingDialog(e){
// 兼容IE8、IE7处理
var event = window.event || e;
var target = event.srcElement || event.target;
while(target && target.className.indexOf('dialog-title')==-1){
target=target.offsetParent;
}
if(target!=null){
return target.offsetParent;
}else{
return null;
}
}
Dragging(getDraggingDialog).enable();
</script>
</body>
</html>
另外这次搞清楚了一个问题,这个问题我查了网上其他资料,都说的不够清晰,这里我补充下。
document.addEventListener('mousedown',down);这句话是将鼠标按下事件注册给document,这样由于“事件冒泡”,则页面上其他任何元素被触发这些事件,则最终事件是会被document对象捕获,如图: