DIV拖动

最新推荐文章于 2024-08-09 13:29:49 发布

lukezu

最新推荐文章于 2024-08-09 13:29:49 发布

阅读量146

点赞数

文章标签： Blog .net

本文链接：https://blog.csdn.net/lukezu/article/details/83638827

版权

<html>
<head>
<title>Drag 'n' Drop Demo</title>
<style>
#foo {
position:absolute;
top:100px;
left:100px;
width:100px;
height:100px;
background-color:#f0f0f0;
border:solid 1px #121212;
}
#foo1 {
position:absolute;
top:150px;
left:130px;
width:100px;
height:100px;
background-color:#fff0f0;
border:solid 1px #121212;
}
#foo2 {
position:absolute;
top:150px;
left:230px;
width:100px;
height:100px;
background-color:#fff0f0;
border:solid 1px #121212;
}
#foo3 {
position:absolute;
top:150px;
left:330px;
width:100px;
height:100px;
background-color:#fff0f0;
border:solid 1px #121212;
}
#foo4 {
position:absolute;
top:150px;
left:430px;
width:100px;
height:100px;
background-color:#fff0f0;
border:solid 1px #121212;
}
#area{
position:absolute;
top:150px;
left:430px;
width:300px;
height:300px;
background-color:#ffffff;
border:dashed 1px #CCCCCC;
}
</style>

</head>
<body>
<script>
window.onload = function(){
var test = new ObjectDragDrop(foo);
var test1 = new ObjectDragDrop("foo1");
var test2 = new ObjectDragDrop("p1");
var test4 = new ObjectDragDrop("foo2");
test4.moveStyle = DD_HMOVE ;
var test5 = new ObjectDragDrop("foo3");
test5.moveStyle = DD_VMOVE ;
// 限制在整个范围内移动
var test6 = new ObjectDragDrop("foo4");
var oldPosLeft = 430;
var oldPosTop = 150;
test6.isMoved = function(newPosX,newPosY){
//长宽为200的正方形范围
return {x:newPosX>=430&&newPosX<=(200+430),y:newPosY>=150&&newPosY<=(200+150)}
}
}
/**
* 类名称： DragDrop|DD
* 功能说明：可拖动类
* 版权信息： CopyRight 2005-2006 JoeCom
* 创建人： JoeCom | MSN:juwuyi@hotmail.com | blog:http://blog.csdn.net/juwuyi
* 创建日期： 2006-07-19
* 修改记录： 1. 2006-07-21 加上scrollTop 和 scrollLeft的相对移动
ł. 2006-07-25 加入moveStyle属性，增加水平移动和垂直移动的功能
Ń. 2006-07-25 加入isMoved函数，增加范围移动功能
*/

//以下定义移动方向的常量
DD_FREEMOVE = 0; //自由移动，没有限制
DD_HMOVE = 1; //水平移动，也就是左右移动
DD_VMOVE = 2; //垂直移动，也就是上下移动
function ObjectDragDrop(obj){
var me = this;
this.moveStyle = DD_FREEMOVE ;
this.foo = (typeof obj=="string")?document.getElementById(obj):obj;
this.onDrop = function(){};
this.onDrag = function(){};
this.isMoved = function(newPosX,newPosY){return {x:true,y:true}};//offsetX:x的移动距离;offsetY:y的移动距离

this.foo.onmousedown = function(e){
var foo = me.foo;
e = e||event;
if( e.layerX ){ foo.oOffset = {x:e.layerX, y:e.layerY }; }
else { foo.oOffset = {x:e.offsetX, y:e.offsetY }; }
document.onmousemove = me.drag;
document.onmouseup = me.drop;
document.onselectstart = function(){ return false; };
}

this.drag = function(e){
var foo = me.foo;
e=e||event;
var mv = me.isMoved(e.clientX - foo.oOffset.x + document.body.scrollLeft,
e.clientY - foo.oOffset.y + document.body.scrollTop);
if (mv.x&&me.moveStyle!=DD_VMOVE)
{
foo.style.left = e.clientX - foo.oOffset.x + document.body.scrollLeft + "px";
}
if (mv.y&&me.moveStyle!=DD_HMOVE)
{
foo.style.top = e.clientY - foo.oOffset.y + document.body.scrollTop + "px";
}
me.onDrag();
}

this.drop = function(e){
e=e||event;
document.onmousemove = document.onmouseup = document.onselectstart = null;
me.onDrop();
}
}

</script>
<h1>最简单的拖动演示</h1>
<span style="position:absolute;left:200px;top:350px;" id="p1">拖动我啊</span>
<div id="foo">test</div>
<div id="foo1">test<br>test2</div>
<div id="foo2">水平移动</div>
<div id="foo3">垂直移动</div>
<div id="area"></div>
<div id="foo4">限制范围移动</div>

</body>
</html>