浏览 9182 次
|
锁定老帖子 主题：发觉prototype.js真是神来之笔啊
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2006-08-20
原来JavaScript可以这样用，今天特意用从prototype.js中学到的招写了一个拖动的对象：EasyDrag，你只要把要支持拖动的对象传过来就可以了：
var dragger = new Dragger();;
dragger.makeDraggable
({targetObj:targetDiv,objContainer:targetDiv1});;
dragger.makeDraggable({targetObj:targetDiv1});;
需要拖动的是两个Div：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
#targetDiv{
background-color:#996600;
border:#333333 solid 1px;
width:100px;
height:100px
}
#targetDiv1{
background-color:#666600;
border:#333333 solid 2px;
width:400px;
height:400px
}
</style>
<script src="prototype.js"></script>
<script src="EasyDrag.js"></script>
<script>
function window::onload();
{
var dragger = new Dragger();;
dragger.makeDraggable({targetObj:targetDiv,objContainer:targetDiv1});;
dragger.makeDraggable({targetObj:targetDiv1});;
}
</script>
</HEAD>
<BODY>
dd
<div id="targetDiv" style="position:absolute;top:120px;left:100px;display:visibility; z-index:2">拖我！！！</div>
<div id="targetDiv1" style="position:absolute;top:120px;left:100px;display:visibility;z-index:1">拖我！！！</div>
</BODY>
</HTML>
prototype.js从这里下载：http://prototype.conio.net/ 这是我写的那个EasyDrag JS对象：
/**
*@(#);EasyDrag.js
* 版本号 1.0
*
*修订记录:
*1);更改者：陈雄华
* 时 间：2006-8-20
* 描 述：创建
*
* 功能说明:
* 使组件拥有移动的功能,
* 1.实例化var dragger = Dragger();对象
* 2.利用dragger.makeDraggable(parameters);方法使组件具备拖动功能
* 其中parameters是一个匿名类，该 匿 名 类 有 以下 的属性：
* 1);targetObj:需要移动的目标组件，对象名或对象实例，可选
* 2);objContainer:包装targetObj的组件，即组件只能在该包装组件内部移动，可选，默认为document.body
* 如果需要进行特殊的移动，可手工提供以下方法
* 3);onMouseDown：鼠标左键按下时响应的方法,传入方法名
* 4);onMouseMove: 鼠标左键按下并拖动时响应的方法，传入方法名
* 5);onMouseUp: 鼠标左键弹起时响应的方法，传入方法名
* 例1：
* function test();
* {
* var dragger = new Dragger();;
* dragger.makeDraggable({targetObj:targetDiv,objContainer:targetDiv1});;
* dragger.makeDraggable({targetObj:targetDiv1});;
* }
* <div id="targetDiv" style="position:absolute;top:120px;left:100px;display:visibility; z-index:2">asdfasdf</div>
* <div id="targetDiv1" style="position:absolute;top:120px;left:100px;display:visibility;z-index:1">asdfasdf</div>
*/
var Dragger = Class.create();;
Dragger.prototype={
initialize:function();{
this.dragArray = new Array();;
},
makeDraggable:function(parameters);{
var item = new DraggerItem(parameters);;
this.dragArray.push(item);;
}
};
var DraggerItem = Class.create();;
DraggerItem.prototype={
initialize:function(parameters);
{
this.targetObj = parameters.targetObj;
this.objContainer = parameters.objContainer?parameters.objContainer:document.body;
this.ponMouseDown = parameters.onMouseDown;
this.ponMouseMove = parameters.onMouseMove;
this.ponMouseUp = parameters.onMouseUp;
this.targetObj.onmousedown = this.ponMouseDown?this.ponMouseDown.bind(this);:
this.onMouseDown.bind(this);;
this.targetObj.onmousemove = this.ponMouseMove?this.ponMouseMove.bind(this);:
this.onMouseMove.bind(this);;
this.targetObj.onmouseup = this.ponMouseUp?this.ponMouseUp.bind(this);:
this.onMouseUp.bind(this);;
this.caculateBorderCoor();;
},
caculateBorderCoor:function();
{
//默认容器，即document
if(this.objContainer == document.body);
{
//左边框坐标
this.x0 = this.objContainer.clientLeft;
//右边框坐标
this.x1 = this.objContainer.clientWidth;
//上边框坐标
this.y0 = this.objContainer.clientTop;
//下边框坐标
this.y1 = this.objContainer.clientHeight;
}
else//是Div
{
var body = document.body;
//左边框坐标
this.x0 = this.objContainer.offsetLeft;
//右边框坐标
this.x1 = this.x0 + this.objContainer.offsetWidth - body.clientLeft;
//上边框坐标
this.y0 = body.clientTop + this.objContainer.offsetTop;
//下边框坐标
this.y1 = this.y0+ this.objContainer.clientHeight - body.clientTop;
}
},
onMouseDown:function();
{
if(event.button==1);//按下左键
{
if(this.ponMouseDown);
{
Try.these(
this.ponMouseDown
);;
}
else
{
this.targetObj.moveable = true;
this.targetObj.setCapture();;
this.startX=parseInt(this.targetObj.style.left);;
this.startY=parseInt(this.targetObj.style.top);;
this.mouseX=event.clientX;
this.mouseY=event.clientY;
}
}
},
onMouseMove:function();
{
if(event.button==1);//按下左键
{
if(this.ponMouseMove);
{
Try.these(
this.ponMouseMove
);;
}
else if(this.targetObj.moveable);
{
var left = this.startX + event.clientX - this.mouseX;
var top = this.startY + event.clientY - this.mouseY;
//超过容器左边框或上边框时
left = left < this.x0?this.x0:left;
top = top < this.y0?this.y0:top;
//超过容器左边框或下边框时
this.targetObj.style.left= left >(this.x1-this.targetObj.clientWidth);?
(this.x1-this.targetObj.clientWidth);:left;
this.targetObj.style.top= top > (this.y1 - this.targetObj.clientHeight);?
(this.y1 - this.targetObj.clientHeight);:top;
window.status =""+left+","+top;
}
}
},
onMouseUp:function();
{
if(event.button==1);//按下左键
{
if(this.ponMouseUp);
{
Try.these(
this.ponMouseUp
);;
}
else if(this.targetObj.moveable);
{
this.targetObj.moveable = false;
this.targetObj.releaseCapture();;
}
}
}
}
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2006-08-21
scriptaculous里有更加现成的实现，两三行代码就可以搞定你上面的功能
|
| 返回顶楼 | |
|
发表时间：2006-08-21
这个好像与Prototype无关吧.
Class.Create()可以用这句代码代替
var Dragger = function(){this.initialize.apply(this, arguments);};
bind也可以这样来达到同样的效果
var oThis = this;
this.targetObj.onmousedown = function(evt)
{
var evt = (evt== null?window.event:evt);
return oThis.onmousedown(evt);
};
并且按照你那样不用bindAsListener的话,结果就是IE only了,不是对Prototype的浪费啊
并且为什么要在每个地方都去判断onmousedown之类的函数,一次搞定多好. 没研究过Drag,原来是直接改坐标.... |
| 返回顶楼 | |
|
发表时间：2006-08-21
oh dear god, lz 写的 跟prototype有什么关系?
|
| 返回顶楼 | |
|
发表时间：2006-08-22
写那么复杂干什么...
还有不少地方容易引起Memory Leak... -_-b |
| 返回顶楼 | |
