js最简单的拖拽效果实现代码
程序员文章站
2022-11-09 10:23:03
其实对于弹出层而言,拖拽最初的目的很单纯,就是为了通过拉开层,使被弹出层挡住的内容可见,(当然,后来关于拖拽的功能不断被优化,使得拖拽的应用有了别的意义,最典型的如igoo...
其实对于弹出层而言,拖拽最初的目的很单纯,就是为了通过拉开层,使被弹出层挡住的内容可见,(当然,后来关于拖拽的功能不断被优化,使得拖拽的应用有了别的意义,最典型的如igoogle的自定义首页,通过拖放的形式满足用户自定义想要的内容模块顺序和位置)。
本文讨论的重点不是igoogle的拖放效果,那属于进阶篇,本文是拖拽的“第一阶”,如题,实现最简单的拖拽。
这里的“最简单”即不考虑多个拖拽层的堆叠顺序,不考虑拖拽范围限制,不考虑类似igoogle的“dragto”的效果等等。。。
恩,废话不多说了,先给大家看个实例吧:
拖我试试...
content...点此-->打开 由于我是直接在页面上内嵌的所有代码,加上博客园第三方插件的原因,代码执行效率高,有可能运行起来不是很流畅
拖拽其实就涉及的鼠标的三个事件,onmousedown,onmouseup,onmousemove,再结合获取鼠标的位置以及层的left和top即可实现类似的效果。
在编码的时候,有两个需要注意的地方,一个是获取当前样式,currentstyle只在ie下有效,故对于非ie我们可以通过getcomputedstyle实现(当然,对于这种需要获取的属性不是很多的情况,您也可以直接用obj.style[key]来获取您当前想要的属性值)
function getstyle(o,key){return o.currentstyle? o.currentstyle[key] : document.defaultview.getcomputedstyle(o,null)[key]}//'currentstyle' only for ie5.0+
另一个点就是在获取鼠标位置时要用到event,event这个东西很奇怪,ie下是局部变量,moz内核下是全局变量(说法不准确,只是便于理解),所以在获取鼠标位置时候要对event做个判断
bar.onmousedown = function(e){
e = e?e:window.event; //'event' ie下局部变量,ff下全局变量
params.isdrag = true;
params._x = e.clientx; params._y = e.clienty;
};
恩,注意以上两点,结合正确的思路其实就可以了,并不难,下面提供参考代码:
function getstyle(o,key){return o.currentstyle? o.currentstyle[key] : document.defaultview.getcomputedstyle(o,null)[key]}//'currentstyle' only for ie5.0+
var drag = function(bar, target){
var params = {
startleft:0,
starttop:0,
_x:0,
_y:0,
isdrag:false
};
if(getstyle(target,'left') != 'auto'){params.startleft = getstyle(target,'left')}
if(getstyle(target,'top') != 'auto'){params.starttop = getstyle(target,'top')}
bar.onmousedown = function(e){
e = e?e:window.event; //'event' ie下局部变量,ff下全局变量
params.isdrag = true;
params._x = e.clientx; params._y = e.clienty;
};
document.onmouseup = function(){
params.isdrag = false;
if(getstyle(target,'left') != 'auto'){params.startleft = getstyle(target,'left')}
if(getstyle(target,'top') != 'auto'){params.starttop = getstyle(target,'top')}
};
document.onmousemove = function(e){
var e = e?e:window.event;
if(params.isdrag){
var curx = e.clientx, cury = e.clienty, desl = curx-params._x+parseint(params.startleft), dest = cury-params._y+parseint(params.starttop);
target.style['left'] = desl>=0?desl + 'px':0;
target.style['top'] = dest>=0?dest + 'px':0;
}
}
};
恩,至此,本文差不多可以结束了,关于类似的igoogle的拖拽进阶篇,有时间会继续的,下面结合拖拽举个综合弹出层的例子,
不设任何options参数的box(默认高200px,宽300px)
无遮罩的box
这个弹出层插件是我在上文中就提到的,而且还提供了源文件下载,在此只是加上了拖动效果而已
ps:由于代码高亮插件的原因,遮罩层上会有白色小方块,暂没做处理。。。
本文讨论的重点不是igoogle的拖放效果,那属于进阶篇,本文是拖拽的“第一阶”,如题,实现最简单的拖拽。
这里的“最简单”即不考虑多个拖拽层的堆叠顺序,不考虑拖拽范围限制,不考虑类似igoogle的“dragto”的效果等等。。。
恩,废话不多说了,先给大家看个实例吧:
拖我试试...
content...点此-->打开 由于我是直接在页面上内嵌的所有代码,加上博客园第三方插件的原因,代码执行效率高,有可能运行起来不是很流畅
拖拽其实就涉及的鼠标的三个事件,onmousedown,onmouseup,onmousemove,再结合获取鼠标的位置以及层的left和top即可实现类似的效果。
在编码的时候,有两个需要注意的地方,一个是获取当前样式,currentstyle只在ie下有效,故对于非ie我们可以通过getcomputedstyle实现(当然,对于这种需要获取的属性不是很多的情况,您也可以直接用obj.style[key]来获取您当前想要的属性值)
复制代码 代码如下:
function getstyle(o,key){return o.currentstyle? o.currentstyle[key] : document.defaultview.getcomputedstyle(o,null)[key]}//'currentstyle' only for ie5.0+
另一个点就是在获取鼠标位置时要用到event,event这个东西很奇怪,ie下是局部变量,moz内核下是全局变量(说法不准确,只是便于理解),所以在获取鼠标位置时候要对event做个判断
复制代码 代码如下:
bar.onmousedown = function(e){
e = e?e:window.event; //'event' ie下局部变量,ff下全局变量
params.isdrag = true;
params._x = e.clientx; params._y = e.clienty;
};
恩,注意以上两点,结合正确的思路其实就可以了,并不难,下面提供参考代码:
复制代码 代码如下:
function getstyle(o,key){return o.currentstyle? o.currentstyle[key] : document.defaultview.getcomputedstyle(o,null)[key]}//'currentstyle' only for ie5.0+
var drag = function(bar, target){
var params = {
startleft:0,
starttop:0,
_x:0,
_y:0,
isdrag:false
};
if(getstyle(target,'left') != 'auto'){params.startleft = getstyle(target,'left')}
if(getstyle(target,'top') != 'auto'){params.starttop = getstyle(target,'top')}
bar.onmousedown = function(e){
e = e?e:window.event; //'event' ie下局部变量,ff下全局变量
params.isdrag = true;
params._x = e.clientx; params._y = e.clienty;
};
document.onmouseup = function(){
params.isdrag = false;
if(getstyle(target,'left') != 'auto'){params.startleft = getstyle(target,'left')}
if(getstyle(target,'top') != 'auto'){params.starttop = getstyle(target,'top')}
};
document.onmousemove = function(e){
var e = e?e:window.event;
if(params.isdrag){
var curx = e.clientx, cury = e.clienty, desl = curx-params._x+parseint(params.startleft), dest = cury-params._y+parseint(params.starttop);
target.style['left'] = desl>=0?desl + 'px':0;
target.style['top'] = dest>=0?dest + 'px':0;
}
}
};
恩,至此,本文差不多可以结束了,关于类似的igoogle的拖拽进阶篇,有时间会继续的,下面结合拖拽举个综合弹出层的例子,
不设任何options参数的box(默认高200px,宽300px)
无遮罩的box
这个弹出层插件是我在上文中就提到的,而且还提供了源文件下载,在此只是加上了拖动效果而已
ps:由于代码高亮插件的原因,遮罩层上会有白色小方块,暂没做处理。。。
下一篇: cdr快速给线描画上色方法