js拖拽实例,该怎么处理
日期：2014-05-16 浏览次数：20425 次
js拖拽实例
实现代码如下
js：
实现代码如下
js：
- JScript code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var params={
left:0,
right:0,
currentX:0,
currentY:0,
flag:false
};
var getCss=function(o,key){
return o.currentStyle? o.currentStyle[key]:document.defaultView.getComputedStyle(o,false)[key];
}
var startDrag=function(bar, target){
if(getCss(target,'left')!==auto){//getCss(target,'left')!==auto)这句是什么意思啊？
params.left=getCss(target,'left'); //记录整体的这一块的位置
}
if(getCss(target,'top')!==auto){
params.top=getCss(target,'top'); //记录整体的这一块的位置
}
bar.onmousedown=function(event){
params.flag=true; //类似的打开开关的感觉。
var e=event; //将鼠标这值给一个变量。
params.currentX=e.clientX;//记录按下时鼠标指针位置相对于窗口客户区域的 x 坐标
params.currentY=e.clientY;
}
bar.onmouseup=function(event){
params.flag=false;
if(getCss(target,'left')!==auto){
params.left=getCss(target,'left'); //记录下鼠标松开时的盒型的位置。
}
if(getCss(target,'top')!==auto){
params.left=getCss(target,'top');
}
}
bar.onmouseover=function(event){
var e = event ? event: window.event;//这句什么意思啊？
if(params.flag){
var nowX=e.clientX;//记录鼠标按下时这个过程的鼠标位移,这个判断语句会让nowX到鼠标松开才不记录，所以这个值最后记录的是，松开的鼠标的值
var nowY=e.clientY;
var disX= e.clientX-params.currentX;
var disY= e.clientY-params.currentY;
target.style.left=parseInt(params.currentX)+disX+'px';
target.style.top=parseInt(params.currentY)+disY+'px';
}
}
};
window.onload = function(){
var oBox = document.getElementById("box");
var oBar = document.getElementById("bar");
startDrag(oBar, oBox);}
var getCss = function(o,key){
return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key]; //这里为什么改成点就不行。
//document.defaultView.getComputedStyle 这是w3c标准方法，取得元素的样式信息，因为有些样式是在外部css文件定义的，所以用element.style是取不到的 如果是IE,可以用 element.currentStyle["name"]
};
//拖拽的实现
var startDrag = function(bar, target){
if(getCss(target, "left") !== "auto"){
params.left = getCss(target, "left");
}
if(getCss(target, "top") !== "auto"){
params.top = getCss(target, "top");
}
//o是移动对象
bar.onmousedown = function(event){
params.flag = true;
if(!event){
event = window.event;
//防止IE文字选中
bar.onselectstart = function(){
return false;
}
}
var e = event;
params.currentX = e.clientX;
params.currentY = e.clientY;
}
bar.onmouseup = function(){
params.flag =
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
