基本要求，是假如有个div 当鼠标放在div上时，按下鼠标左键不松，移动鼠标时DIV随鼠标移动。松开后DIV停止移动。且移动过程中div要透明。
我就能想到event.x event.y 然后用控件的id.style.left id.style.top 可是不知道怎么结合。
我就能想到event.x event.y 然后用控件的id.style.left id.style.top 可是不知道怎么结合。
调试欢乐多
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="gb2312"/>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<style type="text/css">
#drag {width:100px;height:100px;background:red;z-index:200;}
</style> <script type="text/javascript">
var Drag = function(id){
var el = document.getElementById(id);
el.style.position = "absolute";
var drag = function(e) {
e = e || window.event;
el.style.cursor = "pointer";
!+"\v1"? document.selection.empty() : window.getSelection().removeAllRanges();
el.style.left = e.clientX - el.offset_x + "px";
el.style.top = e.clientY - el.offset_y + "px";
el.innerHTML = parseInt(el.style.left,10)+ "X"+parseInt(el.style.top,10);
}
var dragend = function(){
document.onmouseup = null;
document.onmousemove = null;
el.style.filter="alpha(opacity=100)";
el.style.opacity=1;
}
var dragstart = function(e){
e = e || window.event;
el.offset_x = e.clientX - el.offsetLeft;
el.offset_y = e.clientY - el.offsetTop;
el.style.filter="alpha(opacity=50)";
el.style.opacity=.5;
document.onmouseup = dragend;
document.onmousemove = drag;
return false;
}
el.onmousedown = dragstart;
} window.onload = function(){
new Drag("drag");
};
</script>
<title>Drag and Drop</title>
</head>
<body>
<p>拖动时可能被选中的文本……………………</p>
<div id="drag"></div>
<table class="filement_table">
<thead>
<tr>
<th>nodeType</th>
<th>
</th>
<th>
nodeName
</th>
<th>
nodeValue
</th>
<th>
attributes
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Element</td>
<td>tagName大写</td>
<td>null</td>
<td>NamedNodeMap</td>
</tr>
<tr>
<td>2</td>
<td>Attr</td>
<td>name of attribute小写</td>
<td>value of attribute</td>
<td>null</td>
</tr>
<tr>
<td>3</td>
<td>Text</td>
<td>#text</td>
<td>content of the text node</td>
<td>null</td>
</tr>
<tr>
<td>4</td>
<td>CDATASection</td>
<td>#cdata-section</td>
<td>content of the CDATA Section</td>
<td>null</td>
</tr>
<tr>
<td>5</td>
<td>EntityReference</td>
<td>name of entity referenced</td>
<td>null</td>
<td>null</td>
</tr>
<tr>
<td>6</td>
<td>Entity</td>
<td>entity name</td>
<td>null</td>
<td>null</td>
</tr>
<tr>
<td>7</td>
<td>ProcessingInstruction</td>
<td>target</td>
<td>entire content excluding the target</td>
<td>null</td>
</tr>
<tr>
<td>8</td>
<td>Comment</td>
<td>#comment</td>
<td>content of the comment</td>
<td>null</td>
</tr>
<tr>
<td>9</td>
<td>Document</td>
<td>#document</td>
<td>null</td>
<td>null</td>
</tr>
<tr>
<td>10</td>
<td>DocumentType</td>
<td>document type name</td>
<td>null</td>
<td>null</td>
</tr>
<tr>
<td>11</td>
<td>DocumentFragment</td>
<td>#document-fragment</td>
<td>null</td>
<td>null</td>
</tr>
<tr>
<td>12</td>
<td>Notation</td>
<td>notation name</td>
<td>null</td>
<td>null</td>
</tr>
</tbody>
</table> </body>
</html>
movedv 表示当前移动的对象 null表示当前没有要移动的对象
lastxy：[] 表示最后一次鼠标的坐标 [x,y]要移动的dv 监听mousedown事件 事件中 设置 movedv= 该divbody 注册mousemove 事件{
判断 movedv ！=null 则表示有要移动的 对象
获取当前鼠标的 坐标[x,y] - lasyxy[x,y] 获取相对移动[x,y]
movedv 的 [left，top ]+相对移动[x,y]
设置 lastxy=当前鼠标坐标
}body 注册 mouseup事件 {设置 movedv=null }最简单的描述 翻译成代码即可
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.a{width:200px; height:150px; border:1px solid #00CCFF; background:#FAFAFA; position:absolute; top:0px; left:0px; z-index:10;}
.b{width:202px; height:152px; background:#999999; position:absolute; visibility:hidden; top:6px; left:6px; z-index:9;}
</style>
<script type="text/javascript">
function $(id){return document.getElementById(id);}
function opacity(n,v){
if(!-[1,]) n.style.filter='alpha(opacity='+v+')';
n.style.MozOpacity=v/100;
n.style.opacity=v/100;
}
var x=y=t=l=0;
function moveStar(ev){
ev = ev || window.event ;
var xx = ev.pageX || ev.x;
var yy = ev.pageY || ev.y;
x = xx;
y = yy;
t = $('test').offsetTop;
l = $('test').offsetLeft;
$('test').style.cursor = 'move';
$('bb').style.visibility = 'visible';
opacity($('bb'),50);
can = true;
document.onmousemove=moveGo;
document.onmouseup=moveEnd;
}
function moveGo(ev){
ev = window.event || ev;
var xx = ev.pageX || ev.x;
var yy = ev.pageY || ev.y;
$('test').style.top = (t+yy-y)+'px';
$('test').style.left = (l+xx-x)+'px';
$('bb').style.top = (t+yy-y+6)+'px';
$('bb').style.left = (l+xx-x+6)+'px';
}
function moveEnd(){
$('test').style.cursor = 'default';
$('bb').style.visibility = 'hidden';
document.onmousemove='';
document.onmouseup='';
}
</script>
</head><body>
<div id="test" class="a" onmousedown="moveStar(event)"></div>
<div id="bb" class="b"></div>
</body>
</html>
这个你应该能看懂吧，我刚接触JS时写的，很简单的了