<!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" xml:lang="en" style="overflow-y: scroll;">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8;" />
<meta charset="utf-8"/>
<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>
<div id="dlgTest1" class="dialog">
<div class="dialog-title">Dialog</div>
<!--<div class="dialog-content">
This is a draggable test.
</div>-->
</div>
<div>
这是其他
</div><div>
这是其他
</div><div>
这是其他
</div><div>
这是其他
</div><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) {
var tempLeft= e.clientX - diffX;
if(tempLeft<0 || tempLeft>640){
break;
}
draggingObj.style.left = tempLeft + 'px';
if(draggingObj.id=='dlgTest'){
console.log('dlgTest')
}else{
console.log('dlgTest1')
}
//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>
标签在鼠标按下后跟随鼠标移动,兼容低版本IE
最新推荐文章于 2021-12-05 01:47:27 发布