javascript 模块拖动
写的有点问题,但基本实现了功能
<html>
<head>
<style type="text/css">
div{font-size:12px;}
#divMove{border:1px solid red; width:150px; height:200px; cursor:default; top:40px; left:40px; position:absolute; }
#divHead{background-color:#FF6666; width:100%; height:20px; text-align:center;}
#divBody{border:1px solid blue; width:100%; height:100%; text-align:center;
</style>
<script language="JavaScript">
<!--
var $ = document.getElementById;
var movElem = null;
var resizeElem = null;
var movHead = null;
var movStartX = 0;
var movStartY = 0;
var reSizeX = 0;
var reSizeY = 0;
var oX = 0;
var oY = 0;
var isResize = 0; //0:无 1:横 2:竖 3:斜
var isStartResize = false;
String.prototype.pix2Num = function(){
return parseInt(this.substring(0,this.length-2),10);
}
function init(){
document.onmousedown = function(){
if(event.srcElement.id == "divHead"){
movElem = $("divMove");
movElem.attachEvent("onstartselect",function(){return false;});
movElem.attachEvent("oncontextmenu",function(){return false;});
movHead = $("divHead");
movHead.style.cursor = "move";
movStartX = event.x;
movStartY = event.y;
oX = movElem.offsetLeft;
oY = movElem.offsetTop;
return;
}
if(isResize){
resizeElem = event.srcElement;
oX = resizeElem.offsetWidth;
oY = resizeElem.offsetHeight;
reSizeX = event.x;
reSizeY = event.y;
isStartResize = true;
return;
}
}
document.onmousemove = function(){
if(movElem){
movElem.style.left = oX + event.x - movStartX;
movElem.style.top = oY + event.y - movStartY;
return;
}
if(isStartResize){
var x = oX + event.x - reSizeX;
var y = oY + event.y - reSizeY;
x = x>0?x:0;
y = y>0?y:0;
switch(isResize){
case 1:
resizeElem.style.width = x; break;
case 2:
resizeElem.style.height = y; break;
case 3:
resizeElem.style.width = x;
resizeElem.style.height = y; break;
default: break;
}
return;
}
if(event.srcElement.id == "divMove"){
var div = $("divMove");
//div.attachEvent("onmouseout",function(){div.style.cursor = "default";});
var dx = Math.abs(event.x - div.offsetLeft - div.offsetWidth);
var dy = Math.abs(event.y - div.offsetTop - div.offsetHeight);
if( dx < 4 && dy < 4){
isResize = 3;
div.style.cursor = "NW-resize";
}else if(dx < 4){
isResize = 1;
div.style.cursor = "W-resize";
}else if(dy < 4){
isResize = 2;
div.style.cursor = "N-resize";
}else{
if(isResize>0){
div.style.cursor = "default";
isResize = 0;
}
}
return;
}
}
document.onmouseup = function(){
if(movElem){
if(movElem.style.left.pix2Num() < 0)
movElem.style.left = 0;
if(movElem.style.top.pix2Num() < 0)
movElem.style.top = 0;
movHead.style.cursor = "default";
movElem = null;
return;
}
if(isStartResize){
resizeElem = null;
isResize = 0 ;
isStartResize = false;
return;
}
}
}
//-->
</script>
</head>
<body onload="init()">
<div >可移动DIV<br>Code By 梅雪香(Meixx)</div></div>
</body>
</html>
- 上一篇 »从零开始写JavaScript框架（一）
- 下一篇 »HTML5 拖放