js最简单的拖拽效果实现代码
时间：2022-05-08 10:04:38|栏目：JavaScript代码|点击： 次
其实对于弹出层而言，拖拽最初的目的很单纯，就是为了通过拉开层，使被弹出层挡住的内容可见，（当然，后来关于拖拽的功能不断被优化，使得拖拽的应用有了别的意义，最典型的如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：由于代码高亮插件的原因，遮罩层上会有白色小方块，暂没做处理。。。
上一篇：世界上最短的数字判断js代码
栏 目：JavaScript代码
本文标题：js最简单的拖拽效果实现代码
本文地址：http://www.codeinn.net/misctech/201288.html
