拖动Html元素集合 Drag and Drop any item

//iMouseDownrepresentsthecurrentmousebuttonstate:upordown
/*
lMouseStaterepresentsthepreviousmousebuttonstatesothatwecan
checkforbuttonclicksandbuttonreleases:

if(iMouseDown&&!lMouseState)//buttonjustclicked!
if(!iMouseDown&&lMouseState)//buttonjustreleased!
*/
varmouseOffset=null;
variMouseDown=false;
varlMouseState=false;
vardragObject=null;

//Demo0variables
varDragDrops=[];
varcurTarget=null;
varlastTarget=null;
vardragHelper=null;
vartempDiv=null;
varrootParent=null;
varrootSibling=null;

Number.prototype.NaN0=function(){returnisNaN(this)?0:this;}

functionCreateDragContainer(){
/*
Createanew"ContainerInstance"sothatitemsfromone"Set"cannot
bedraggedintoitemsfromanother"Set"
*/
varcDrag=DragDrops.length;
DragDrops[cDrag]=[];

/*
Eachitempassedtothisfunctionshouldbea"container".Storeeach
oftheseitemsinourcurrentcontainer
*/
for(vari=0;ivarcObj=arguments[i];
DragDrops[cDrag].push(cObj);
cObj.setAttribute('DropObj',cDrag);

/*
Everytopleveliteminthesecontainersshouldbedraggable.Dothis
bysettingtheDragObjattributeoneachitemandthenlaterchecking
thisattributeinthemouseMovefunction
*/
for(varj=0;j

//Firefoxputsinlotsof#textnodes...skipthese
if(cObj.childNodes[j].nodeName=='#text')continue;

cObj.childNodes[j].setAttribute('DragObj',cDrag);
}
}
}

functionmouseCoords(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
};
}

functiongetMouseOffset(target,ev){
ev=ev||window.event;

vardocPos=getPosition(target);
varmousePos=mouseCoords(ev);
return{x:mousePos.x-docPos.x,y:mousePos.y-docPos.y};
}

functiongetPosition(e){
varleft=0;
vartop=0;
while(e.offsetParent){
left+=e.offsetLeft+(e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top+=e.offsetTop+(e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
e=e.offsetParent;
}

left+=e.offsetLeft+(e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
top+=e.offsetTop+(e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);

return{x:left,y:top};

}

functionmouseMove(ev){
ev=ev||window.event;

/*
Wearesettingtargettowhateveritemthemouseiscurrentlyon

Firefoxusesevent.targethere,MSIEusesevent.srcElement
*/
vartarget=ev.target||ev.srcElement;
varmousePos=mouseCoords(ev);

//mouseOutevent-firesiftheitemthemouseisonhaschanged
if(lastTarget&&(target!==lastTarget)){
//resettheclassnameforthetargetelement
varorigClass=lastTarget.getAttribute('origClass');
if(origClass)lastTarget.className=origClass;
}

/*
dragObjisthegroupingouritemisin(setfromthecreateDragContainerfunction).
iftheitemisnotinagroupingweignoreitsinceitcan'tbedraggedwiththis
script.
*/
vardragObj=target.getAttribute('DragObj');

//ifthemousewasmovedoveranelementthatisdraggable
if(dragObj!=null){

//mouseOverevent-Changetheitem'sclassifnecessary
if(target!=lastTarget){
varoClass=target.getAttribute('overClass');
if(oClass){
target.setAttribute('origClass',target.className);
target.className=oClass;
}
}

//iftheuserisjuststartingtodragtheelement
if(iMouseDown&&!lMouseState){
//mouseDowntarget
curTarget=target;

//Recordthemousexandyoffsetfortheelement
rootParent=curTarget.parentNode;
rootSibling=curTarget.nextSibling;

mouseOffset=getMouseOffset(target,ev);

//WeremoveanythingthatisinourdragHelperDIVsowecanputanewiteminit.
for(vari=0;i

//Makeacopyofthecurrentitemandputitinourdraghelper.
dragHelper.appendChild(curTarget.cloneNode(true));
dragHelper.style.display='block';

//settheclassonourhelperDIVifnecessary
vardragClass=curTarget.getAttribute('dragClass');
if(dragClass){
dragHelper.firstChild.className=dragClass;
}

//disabledraggingfromourhelperDIV(it'salreadybeingdragged)
dragHelper.firstChild.removeAttribute('DragObj');

/*
Recordthecurrentpositionofalldrag/droptargetsrelated
totheelement.Wedothisheresothatwedonothavetodo
itonthegeneralmousemoveeventwhichfireswhenthemouse
moveseven1pixel.Ifwedon'tdothisherethescript
wouldrunmuchslower.
*/
vardragConts=DragDrops[dragObj];

/*
firstrecordthewidth/heightofourdragitem.Thenhideitsince
itisgoingto(potentially)bemovedoutofitsparent.
*/
curTarget.setAttribute('startWidth',parseInt(curTarget.offsetWidth));
curTarget.setAttribute('startHeight',parseInt(curTarget.offsetHeight));
curTarget.style.display='none';

//loopthrougheachpossibledropcontainer
for(vari=0;iwith(dragConts[i]){
varpos=getPosition(dragConts[i]);

/*
savethewidth,heightandpositionofeachcontainer.

Eventhoughwearesavingthewidthandheightofeach
containerbacktothecontainerthisismuchfasterbecause
wearesavingthenumberanddonothavetorunthrough
anycalculationsagain.Also,offsetHeightandoffsetWidth
arebothfairlyslow.Youwouldnevernormallynoticeany
performancehitfromthesetwofunctionsbutourcodeis
goingtoberunninghundredsoftimeseachsecondsoevery
littlebithelps!

Notethatthebiggestperformancegainhere,byfar,comes
fromnothavingtorunthroughthegetPositionfunction
hundredsoftimes.
*/
setAttribute('startWidth',parseInt(offsetWidth));
setAttribute('startHeight',parseInt(offsetHeight));
setAttribute('startLeft',pos.x);
setAttribute('startTop',pos.y);
}

//loopthrougheachchildelementofeachcontainer
for(varj=0;jwith(dragConts[i].childNodes[j]){
if((nodeName=='#text')||(dragConts[i].childNodes[j]==curTarget))continue;

varpos=getPosition(dragConts[i].childNodes[j]);

//savethewidth,heightandpositionofeachelement
setAttribute('startWidth',parseInt(offsetWidth));
setAttribute('startHeight',parseInt(offsetHeight));
setAttribute('startLeft',pos.x);
setAttribute('startTop',pos.y);
}
}
}
}
}

//Ifwegetinherewearedraggingsomething
if(curTarget){
//moveourhelperdivtowhereverthemouseis(adjustedbymouseOffset)
dragHelper.style.top=mousePos.y-mouseOffset.y;
dragHelper.style.left=mousePos.x-mouseOffset.x;

vardragConts=DragDrops[curTarget.getAttribute('DragObj')];
varactiveCont=null;

varxPos=mousePos.x-mouseOffset.x+(parseInt(curTarget.getAttribute('startWidth'))/2);
varyPos=mousePos.y-mouseOffset.y+(parseInt(curTarget.getAttribute('startHeight'))/2);

//checkeachdropcontainertoseeifourtargetobjectis"inside"thecontainer
for(vari=0;iwith(dragConts[i]){
if(((getAttribute('startLeft'))((getAttribute('startTop'))((getAttribute('startLeft')+getAttribute('startWidth'))>xPos)&&
((getAttribute('startTop')+getAttribute('startHeight'))>yPos)){

/*
ourtargetisinsideofourcontainersosavethecontainerinto
theactiveContvariableandthenexittheloopsincewenolonger
needtochecktherestofthecontainers
*/
activeCont=dragConts[i];

//exittheforloop
break;
}
}
}

//Ourtargetobjectisinoneofourcontainers.Checktoseewhereourdivbelongs
if(activeCont){
//beforeNodewillholdthefirstnodeAFTERwhereourdivbelongs
varbeforeNode=null;

//loopthrougheachchildnode(skippingtextnodes).
for(vari=activeCont.childNodes.length-1;i>=0;i--){
with(activeCont.childNodes[i]){
if(nodeName=='#text')continue;

//ifthecurrentitemis"After"theitembeingdragged
if(
curTarget!=activeCont.childNodes[i]&&
((getAttribute('startLeft')+getAttribute('startWidth'))>xPos)&&
((getAttribute('startTop')+getAttribute('startHeight'))>yPos)){
beforeNode=activeCont.childNodes[i];
}
}
}

//theitembeingdraggedbelongsbeforeanotheritem
if(beforeNode){
if(beforeNode!=curTarget.nextSibling){
activeCont.insertBefore(curTarget,beforeNode);
}

//theitembeingdraggedbelongsattheendofthecurrentcontainer
}else{
if((curTarget.nextSibling)||(curTarget.parentNode!=activeCont)){
activeCont.appendChild(curTarget);
}
}

//makeourdragitemvisible
if(curTarget.style.display!=''){
curTarget.style.display='';
}
}else{

//ourdragitemisnotinacontainer,sohideit.
if(curTarget.style.display!='none'){
curTarget.style.display='none';
}
}
}

//trackthecurrentmousestatesowecancompareagainstitnexttime
lMouseState=iMouseDown;

//mouseMovetarget
lastTarget=target;

//trackthecurrentmousestatesowecancompareagainstitnexttime
lMouseState=iMouseDown;

//thishelpspreventitemsonthepagefrombeinghighlightedwhiledragging
returnfalse;
}

functionmouseUp(ev){
if(curTarget){
//hideourhelperobject-itisnolongerneeded
dragHelper.style.display='none';

//ifthedragitemisinvisibleputitbackwhereitwasbeforemovingit
if(curTarget.style.display=='none'){
if(rootSibling){
rootParent.insertBefore(curTarget,rootSibling);
}else{
rootParent.appendChild(curTarget);
}
}

//makesurethedragitemisvisible
curTarget.style.display='';
}
curTarget=null;
iMouseDown=false;
}

functionmouseDown(){
iMouseDown=true;
if(lastTarget){
returnfalse;
}
}

document.onmousemove=mouseMove;
document.onmousedown=mouseDown;
document.onmouseup=mouseUp;

window.onload=function(){
//Createourhelperobjectthatwillshowtheitemwhiledragging
dragHelper=document.createElement('DIV');
dragHelper.style.cssText='position:absolute;display:none;';

CreateDragContainer(
document.getElementById('DragContainer1'),
document.getElementById('DragContainer2'),
document.getElementById('DragContainer3')
);

document.body.appendChild(dragHelper);
}

Item#1