event 事件div块的拖拽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top: 0;
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById("div1");
var disX = 0;
var disY = 0;
oDiv.onmousedown = function(ev)
{
var oEvent = ev||event;
disX = oEvent.clientX - oDiv.offsetLeft;
disY = oEvent.clientY - oDiv.offsetTop;
document.onmousemove = function(ev){//document.onmousemove可避免鼠标移动的块位置问题
var oEvent = ev || event;
oDiv.style.left = oEvent.clientX - disX +"px";
oDiv.style.top = oEvent.clientY - disY +"px";
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
完整版 禁止上下左右 出界
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top: 0;
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById("div1");
var disX = 0;
var disY = 0;
oDiv.onmousedown = function(ev)
{
var oEvent = ev||event;
disX = oEvent.clientX - oDiv.offsetLeft;
disY = oEvent.clientY - oDiv.offsetTop;
document.onmousemove = function(ev){
var oEvent = ev || event;
var l = oEvent.clientX - disX; //块的x位置
var t = oEvent.clientY - disY;//块的y位置
if(l<0)
{
l = 0;
}else if(l>document.documentElement.clientWidth - oDiv.offsetWidth)
{
l = document.documentElement.clientWidth - oDiv.offsetWidth;
}
if(t <0)
{
t = 0;
}else if(t>document.documentElement.clientHeight - oDiv.offsetHeight)
{
t = document.documentElement.clientHeight - oDiv.offsetHeight;
}
oDiv.style.left =l +"px";
oDiv.style.top = t +"px";
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
return false;//阻止火狐bug ff下拖拽空div会出现重影
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
带虚线框的拖拽块
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top: 0;
}
.box{
border: 1px dashed black;
position: absolute;
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById("div1");
var disX = 0;
var disY = 0;
oDiv.onmousedown = function(ev)
{
var oEvent = ev||event;
disX = oEvent.clientX - oDiv.offsetLeft;
disY = oEvent.clientY - oDiv.offsetTop;
//鼠标按下创建一个box 给上className虚线框
//虚线框的宽度就是 oDIv块的宽度
var oBox = document.createElement("box");
oBox.className = "box";
oBox.style.width = oDiv.offsetWidth + "px";
oBox.style.height = oDiv.offsetHeight +"px";
//当鼠标按下的时候虚线框的位置没变 所以要改变虚线框的位置
oBox.style.left = oDiv.offsetLeft +"px";
oBox.style.top = oDiv.offsetTop +"px";
document.body.appendChild(oBox);
document.onmousemove = function(ev){
var oEvent = ev || event;
var l = oEvent.clientX - disX; //块的x位置
var t = oEvent.clientY - disY;//块的y位置
if(l<0)
{
l = 0;
}else if(l>document.documentElement.clientWidth - oDiv.offsetWidth)
{
l = document.documentElement.clientWidth - oDiv.offsetWidth;
}
if(t <0)
{
t = 0;
}else if(t>document.documentElement.clientHeight - oDiv.offsetHeight)
{
t = document.documentElement.clientHeight - oDiv.offsetHeight;
}
oBox.style.left =l +"px";
oBox.style.top = t +"px";
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
//oDiv的left top 等于 oBox的左边距
oDiv.style.left = oBox.offsetLeft +"px";
oDiv.style.top = oBox.offsetTop +"px";
// 鼠标离开清除虚线框
document.body.removeChild(oBox);
}
return false;//阻止火狐bug ff下拖拽空div会出现重影
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
