JavaScript实现拖动效果
2008-01-24 09:19
525 查看
学习了一下用JavaScript实现拖动效果,找来网上的代码分析了一下然后照抄了个最简单的,将慢慢将它完善 现状:目前还不支持FireFox 不支持项(已知项):pixelLeft、pixelTop、alpha(opacity=90) |
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<HTML>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<HEAD>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<TITLE> New Document </TITLE>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<META NAME="Generator" CONTENT="EditPlus">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<META NAME="Author" CONTENT="">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<META NAME="Keywords" CONTENT="">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<META NAME="Description" CONTENT="">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<style>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
*...{font-size:12px}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
.dragTable...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
font-size:12px;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
border-top:1px solid #3366cc;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
margin-bottom: 10px;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
width:100%;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
background-color:#FFFFFF;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
.dragTR...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
cursor:move;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
color:#7787cc;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
background-color:#e5eef9;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
td...{vertical-align:top;}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
#parentTable...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
border-collapse:collapse;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
letter-spacing:25px;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</style>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<script language="JavaScript" type="text/javascript">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
/**//** 目标面板 */
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
var tarElement=null;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
/**//** 实际被拖动面板 */
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
var dragElement=null;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
/**//** 定义元素位置 */
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
var downX,downY,tmp_o_x,tmp_o_y;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
var refElement=null;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
var dragActive=0;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
/**//** 是否在移动中 1为是 */
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
var draging=0;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
function getEventElement (event)...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
if(event == null)...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
event = window.event;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
return (event.srcElement ? event.srcElement : event.target);
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
/**//**
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
* onMouseDown触发事件
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif)
*/
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
function readyDrag(event) ...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
dragActive = 1;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
var eventObj = getEventElement(event);
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
// 非DIV元素不能被拖动
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
if(eventObj.tagName != "DIV") return;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
// 将目标元素附给dragElement
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
dragElement = eventObj.parentNode;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
// 复制一个tmpElement到目标面板
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
tarElement = dragElement.cloneNode(true);
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
// TODO alpha(opacity=50)仅被IE支持
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
tarElement.style.filter="alpha(opacity=50)"
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
tarElement.style.zIndex=2;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
dragElement.style.zIndxe=1;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
tarElement.style.position="absolute";
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
if(dragElement.parentNode.tagName != "BODY")...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
// 当选中可拖动元素时,初始化拖动元素的初始位置
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
// TODO pixelLeft仅被IE支持
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
dragElement.style.left = dragElement.offsetLeft + dragElement.parentNode.style.pixelLeft;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
dragElement.style.top = dragElement.offsetTop + dragElement.parentNode.style.pixelTop;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
//取得当前鼠标的绝对位置
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
downX=event.clientX;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
downY=event.clientY;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
//取得拖动元素当前的绝对位置
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
tmp_o_x=dragElement.style.pixelLeft;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
tmp_o_y=dragElement.style.pixelTop;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
tarElement.style.visibility="hidden";
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
document.body.appendChild(tarElement);
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
document.onmousemove=startDrag;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
document.onmouseup=endDrag;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
/**//**
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
* onMouseOver事件触发
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif)
*/
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
function startDrag()...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
if(dragActive==1&&event.button==1&&dragElement!=null&&tarElement!=null)...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
//当拖动动作进行、mouse button pressed、拖动物件存在、目标面板存在的情况下
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
tarElement.style.visibility="visible";
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
tarElement.style.left=tmp_o_x+event.clientX-downX;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
tarElement.style.top=tmp_o_y+event.clientY-downY;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
dragElement.style.backgroundColor="#CCCCCC";
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
//游标样式
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
document.body.style.cursor="move";
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
draging=1;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
/**//**
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
* onMouseUp时间触发
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif)
*/
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif)
function endDrag()...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
if(dragActive==1&&tarElement!=null)...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
//当拖动动作进行、目标面板存在的情况下
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gif)
if(draging==1)...{
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
// 如果面板处于移动状态中,将原有面板移除
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
dragElement.removeNode(true);
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
draging=0;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
tarElement.style.filter="alpha(opacity=100)";
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
tarElement.style.zIndex=1;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
document.body.style.cursor="default";
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
dragElement=null;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
tarElement=null;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif)
dragActive=0;
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gif)
}
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</script>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</HEAD>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<BODY>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<div id="div_one" class="div_one" style="position:absolute; left:116px; top:137px; width:433px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF;">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<div onMouseDown="readyDrag(event)" style="cursor:move; border:1px solid #996666; background-color:#996666; height:20px" name="dragDIV" class="dragBar">
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
Window
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</div>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
<div class="textSheet" style="border:1px solid #996666;">Content<br></div>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</div>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</BODY>
![](http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif)
</HTML>
相关文章推荐
- Javascript实现的类似Google的Div拖动效果代码
- 用JavaScript实现像PDA式的页面鼠标拖动效果!经典!
- 【CSON原创】 javascript拖动缩放效果实现
- javascript 实现拖动效果
- javascript 事件处理、鼠标拖动效果实现方法详解
- 原生javascript实现鼠标在窗口按下拖动,元素放大效果。
- 基于JavaScript实现拖动滑块效果
- Javascript实现的类似Google的Div拖动效果代码
- html+javascript实现可拖动可提交的弹出层对话框效果
- 纯javaScript实现div层拖动/移位效果 推荐学习
- javascript 实现图片的拖动效果
- javascript实现拖动层效果代码(符合标准且兼容IE,chrome,firefox)
- javascript实现弹出带透明效果的可拖动图层
- javascript 中ondragstart ondrag实现拖动界面元素效果 .
- javascript实现拖动层效果代码(许愿墙)
- javascript 中ondragstart ondrag实现拖动界面元素效果
- 最精简的JavaScript实现鼠标拖动效果的方法
- javascript实现简单的鼠标拖动效果实例
- javascript 实现拖动效果
- javascript 事件处理、鼠标拖动效果实现方法详解