简单的javascript拖拽实例----> 本人原创（244796562@qq.com）
<html>
<head>
<title>拖拽测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="box" style="position:absolute;top:100px;left:200px;width:200px;height:200px;background-color:#C0C0C0;border:solid 1px #555555">
<div id="bar" title="可移动" style="cursor:pointer;background-color:#0099FF;border-bottom:solid 1px #555555" mce_style="cursor:pointer;background-color:#0099FF;border-bottom:solid 1px #555555">
<b>title:拖动条</b>
</div>
content:内容区
</div>
<mce:script type="text/javascript"><!--
function stopBubble(e) {//禁止冒泡事件
if (e && e.stopPropagation) {
e.stopPropagation();
} else {
window.event.cancelBubble = true;
}
}
function stopDefault(e) {//禁止默认行为
if (e && e.preventDefault) {
e.preventDefault();
} else {
window.event.returnValue = false;
}
return false;
}
function drag(box, bar) {//被拖拽的元素必须有top(px)和left(px)属性
var lastMouseX, lastMouseY;
if (!box.style.left || !box.style.top) {//如果真的没有top(px)和left(px)属性，加默认值
box.style.left = "10px";
box.style.top = "10px";
}
function getMousePos(e) {//获取鼠标坐标
e = e || window.event;
return {x: e.clientX, y: e.clientY};
}
bar.onmousedown = function(ed) {//初始化拖拽事件
stopBubble(ed);
stopDefault(ed);
var lastMousePos = getMousePos(ed);
lastMouseX = lastMousePos.x;
lastMouseY = lastMousePos.y;
window.top.document.onmousemove = function(em) {//注册移动事件
stopBubble(em);
stopDefault(em);
var currentMousePos = getMousePos(em);//当前鼠标位置
var currentMouseX = currentMousePos.x;
var currentMouseY = currentMousePos.y;
var boxLeft = parseInt(box.style.left);//拖动层的位置
var boxTop = parseInt(box.style.top);
box.style.left = boxLeft + currentMouseX - lastMouseX +
