当前位置: 首页 > 图文教程 > XML家族 > XML > 网页拖动元素:兼容IE与FF的拖动DOM

XML
XML入门教程：元素声明
XML入门教程：文档类型声明
XML入门教程：XML语法
xml入门教程:XML是什么
WAP教程(11):WAP论坛和开放移动联盟与论坛
WAP教程(10):WML参考手册、WML实例和WML DTD
WAP教程(7):WML 计时器
WAP教程(6):WML 任务
WAP教程(5):WML 输入
WAP教程(4):WML 链接和图像
WAP教程(3):WML 格式化
WAP教程(8):WML 变量
WAP教程(2):WAP 基础
WAP教程(9):WML 实例
WAP教程(1):WAP 简介
XML入门教程：XSLT
XMLHTTPRequest对象
XML入门教程：CSS样式表
XML入门教程：XPath
XML入门教程：XLink

No. « 5 6 7 8 »

技术文章搜索

关键字

XML 中的 网页拖动元素:兼容IE与FF的拖动DOM

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2010-03-20   浏览: 377 ::
收藏到网摘: n/a

这年头写js的人是越来越少了，一方面大部分的效果网上都有，另外一方面好多js框架可以用。我想知其然还要知其所以然，废话不多说，上代码..注释很详细：
仅兼容IE：


/*
该函数由mousedown事件处理调用
它为随后发生的mousemove和mouseup事件注册了临时的捕捉事件处理程序
并用这些事件处理程序拖动指定的文档元素
第二个参数必须是mousedown事件的事件对象
*/
function beginDrag(elementToDrag,event)
{
//该元素当前位于何处
//该元素的样式性质必须具有left和top CSS属性
//此外，我们假定他们用象素做单位
//var x=parseInt(elementToDrag.style.left);
//var y=parseInt(elementToDrag.style.top);
//计算一个点和鼠标点击之间的距离，下面的嵌套的moveHandler函数需要这些值
var deltaX=event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
// 注册mousedown事件后发生的mousemove和mouseup事件的处理程序
// 注意，它们被注册为文档的捕捉事件处理程序
// 在鼠标按钮保持按下的状态的时候，这些事件处理程序保持活动的状态
// 在按钮被释放的时候，它们被删除
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
//我们已经处理了该事件，不要让别的元素看到它
event.cancelBubble=true;
event.returnValue=false;
/*
这是在元素被拖动时候捕捉mousemove事件的处理程序，它响应移动的元素
*/
function moveHandler(e)
{
//把元素移动到当前的鼠标位置
e=window.event;
elementToDrag.style.left=(event.clientX-deltaX)+"px";
elementToDrag.style.top=(event.clientY-deltaY)+"px";
//不要让别的元素看到该事件
event.cancelBubble=true;
}
/*
该事件将捕捉拖动结束的时候发生的mouseup事件
*/
function upHandler(e)
{
//注销事件处理程序
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);}
event.cancelBubble=true;
}
调用它的HTML文件代码：
　<html>
　<head>
　 <title>Untitled Page</title>
　 <script type="text/javascript" src="dragIE.js"></script>
　</head>
　<body>
　<div style="position:absolute;left:100px;top:100px;background-color:White;border:solid black;">
　 <div style="background-color:Gray;border-bottom:solid black;padding:3px;font-family:Sans-Serif;font-weight:bold;" onmousedown="beginDrag(this.parentNode,event);">
　 拖动我
　 </div>
　 <div>
　 <p>This is a test.Testing,testing</p></div>
　</div>
　</body>


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

兼容火狐的拖动DOM元素的js：


function beginDrag(elementToDrag,event)
{
var deltaX=event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
if(document.addEventListener)
{
document.addEventListener("mousemove",moveHandler,true);
document.addEventListener("mouseup",upHandler,true);
}
else if(document.attachEvent)
{
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
}
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
if(event.preventDefault) event.preventDefault();
else event.returnValue=false;
function moveHandler(e)
{
　　if (!e) e=window.event; //如果是IE的事件对象，那么就用window.event
　　//全局属性，否则就用DOM二级标准的Event对象。
elementToDrag.style.left=(event.clientX-deltaX)+"px";
elementToDrag.style.top=(event.clientY-deltaY)+"px";
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
}
function upHandler(e)
{
if(document.removeEventListener)
{
document.removeEventListener("mouseup",upHandler,true);
document.removeEventListener("mousemove",moveHandler,true);}
else
{
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);}
}
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
}