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" />
<style type="text/css">
*{}{ margin:0px; padding:0px}
body{}{height:500px; text-align:center;}
.con{}{float:left;width:100px;margin:0px; height:100px; border: 1px dotted red}
.con h1{}{font-size:12px ;font-weight:bold;height:25px;line-height:25px; background:#cbcbcb;cursor:move;}
#end{}{visibility:hidden;}
#content{}{width:430px;margin:20px auto;height:500px;border: 1px dashed green}
</style>
<script type="text/javascript">
/**//*
CodeName XDrag_Drop_Sort
CodeBy Popper.w
QQ 84101340
Time -5-7
*/
</script>
</head>
<body>
<div id="content">
<div id="a1" class="con"><h1>a1</h1></div>
<div id="a2" class="con"><h1>a2</h1></div>
<div id="a3" class="con"><h1>a3</h1></div>
<div id="a4" class="con"><h1>A4</h1></div>
<div id="a5" class="con"><h1>a5</h1></div>
<div id="a6" class="con"><h1>a6</h1></div>
<div id="a7" class="con"><h1>a7</h1></div>
<div id="a8" class="con"><h1>a8</h1></div>
<div id="a9" class="con"><h1>a9</h1></div>
<div id="a10" class="con"><h1>a10</h1></div>
<div id="a11" class="con"><h1>a11</h1></div>
<div id="end" class="con"><h1>a11</h1></div>
</div>
<input type="button" value="save" id="Sbt" />
</body>
</html>
<script type="text/javascript">
function XmouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function XgetMouseOffset(target, ev){
ev = ev || window.event;
var docPos=XgetPosition(target);
var mousePos = XmouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}
function XgetPosition(e){
var left = 0;
var top = 0;
while(e.offsetParent){
left += e.offsetLeft;
top += e.offsetTop;
e= e.offsetParent;
}
left += e.offsetLeft;
top += e.offsetTop;
return {x:left, y:top};
}
var $=function(){return document.getElementById(arguments[0])}
/**//*拖动时判断位置的层*/
var HelperDiv=document.createElement("div");
document.body.appendChild(HelperDiv);
with(HelperDiv.style){
display="none";
position="absolute";
cursor="move";
}
function XCapture(o,mak){
if(mak=="start"){
if(o.setCapture){o.setCapture();}
else if(window.captureEvents)
{window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);}
}
if(mak=="end"){
if(o.releaseCapture){o.releaseCapture();}
else if(window.captureEvents)
{window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);}
}
}
/**//*移动*/
function Xmove(o,l,t){
o.style.position="absolute";
var a=1;
var ol=parseInt(o.offsetLeft);
var ot=parseInt(o.offsetTop);
var iTimer=setInterval(function(){
if(a==10)
{ HelperDiv.style.display="none";
clearInterval(iTimer);
}
o.style.left=ol+a*(l-ol)/10+"px";
o.style.top=ot+a*(t-ot)/10+"px";
a++;
},20);
}
function Odrag (obj) {
var Xid=0;//判断是否有匹配的元素 0：无 Ł：有
var tDiv=null;//如果有匹配动态创建元素
var om={}
om.sortBox=obj.getAttribute("SortBox");//sort 的容器
om.state=obj.getAttribute("state");//鼠标 状态 ŀ：up 1 ：down
om.obj=obj;//移动的对象
om.dragObj=obj.getAttribute("dragObj");//需要改变位置元素鼠标按下时的 esrcElement
var E_X=obj.getAttribute("E_X");
var E_Y=obj.getAttribute("E_Y");
XCapture(om.obj,"start");
om.obj.onmouseup=function(){
XCapture(om.obj,"end");
om.state=0;
om.obj.releaseCapture();
if(Xid==1){
tDiv.id=om.dragObj.id
tDiv.innerHTML=om.obj.innerHTML;
om.dragObj.parentNode.removeChild(om.dragObj);
Xmove(om.obj,XgetPosition(tDiv).x,XgetPosition(tDiv).y);
SetSortObj(tDiv);
}
if(Xid==0){
om.dragObj.style.display="block";
Xmove(om.obj,XgetPosition(om.dragObj).x,XgetPosition(om.dragObj).y);
}
return ;
}
document.body.onmousemove=function(e){
var e=e||window.event;
if(om.state==1){
om.obj.style.left=XmouseCoords(e).x-E_X+"px";
om.obj.style.top=XmouseCoords(e).y-E_Y+"px";
var C_Y=XmouseCoords(e).y;
var C_X=XmouseCoords(e).x;
var oX=CheckPos (C_X,C_Y,GetPos(om.dragObj));
if(oX!=undefined){
if(Xid==0){
tDiv=document.createElement("div");
tDiv.className="con";
tDiv.innerHTML=""
tDiv.setAttribute("target",oX.obj);
Xid=1;
oX.obj.parentNode.insertBefore(tDiv,oX.obj);
}
}
else{
if(Xid==1){
tDiv.getAttribute("target").style.display="block";
tDiv.parentNode.removeChild(tDiv);
tDiv=null;
}
Xid=0;
}
}
}
}
/**//*设置被拖动元素在点击事件发生时记录的信息*/
function SetSortObj(obj,box) {
obj.setAttribute("isDrag","Sort")
obj.onmousedown=function(e){
var e=e||window.event;
HelperDiv.style.position="absolute";
this.style.display="none";
HelperDiv.style.display="block";
HelperDiv.innerHTML=obj.innerHTML;
HelperDiv.setAttribute("className","con");
HelperDiv.style.left=XgetPosition(this).x+"px";
HelperDiv.style.top=XgetPosition(this).y+"px";
HelperDiv.setAttribute("state",1);
HelperDiv.setAttribute("dragObj",obj);
HelperDiv.setAttribute("E_X",XgetMouseOffset(this,e).x);
HelperDiv.setAttribute("E_Y",XgetMouseOffset(this,e).y);
HelperDiv.setAttribute("SortBox",box);
Odrag(HelperDiv);
}
}
/**//*得到容器内的所有节点的坐标*/
function GetPos (o) {
var Xlen=o.parentNode.getElementsByTagName("div");
var temp={};
for(var i=0;i<Xlen.length;i++){
if(Xlen[i].className=="con"&&Xlen[i]!=o){
var te=Xlen[i];
temp[te.id]={
left:XgetPosition(te).x,
top:XgetPosition(te).y,
pos:i+1,
obj:te
}
}
}
return temp;
}
/**//*用当前鼠标坐标通容器内所有节点的坐标对比如果在范围内返回相关信息 */
function CheckPos (x,y,args) {
for(var o in args){
var a=args[o]
if(a.left<x&&a.top<y&&a.left+a.obj.offsetWidth-20>x&&a.top+a.obj.offsetHeight-20>y){
return a;
}
}
}
/**//*开始---设置容器 拖动对象*/
function DragDrop_Sort(box,target){
var sortDiv=box.getElementsByTagName(target);
for(var i=0;i<sortDiv.length;i++){
SetSortObj(sortDiv[i],box);
}
}
/**//*设置容器内元素的位置*/
DragDrop_Sort($("content"),"div");
$("Sbt").onclick=function(){
var temp=[];
var xx=$("content").getElementsByTagName("div");
for(var i=0;i<xx.length;i++){
xx[i].setAttribute("pos",i+1);
temp.push("id:"+xx[i].id+" pos:"+xx[i].getAttribute("pos")+"\n");
}
alert(temp);
}
</script>
posted @
2009-03-19 09:59
雪狼531
阅读(
157)
评论()
收藏
举报
浙公网安备 33010602011771号