拖动Html元素集合 Drag and Drop any item_Javascript教程-查字典教程网

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

摘要：li{MARGIN-BOTTOM:10px}ul{MARGIN-TOP:5px}.DragContainer{BORDER-RIGHT:#6...

<stylecontent="text/css">

li{

MARGIN-BOTTOM:10px

}

ul{

MARGIN-TOP:5px

}

.DragContainer{

BORDER-RIGHT:#6699992pxsolid;PADDING-RIGHT:5px;BORDER-TOP:#6699992pxsolid;PADDING-LEFT:5px;FLOAT:left;PADDING-BOTTOM:0px;MARGIN:3px;BORDER-LEFT:#6699992pxsolid;WIDTH:100px;PADDING-TOP:5px;BORDER-BOTTOM:#6699992pxsolid

}

.OverDragContainer{

}

.OverDragContainer{

BACKGROUND-COLOR:#eee

}

.DragBox{

BORDER-RIGHT:#0001pxsolid;PADDING-RIGHT:2px;BORDER-TOP:#0001pxsolid;PADDING-LEFT:2px;FONT-SIZE:10px;MARGIN-BOTTOM:5px;PADDING-BOTTOM:2px;BORDER-LEFT:#0001pxsolid;WIDTH:94px;CURSOR:pointer;PADDING-TOP:2px;BORDER-BOTTOM:#0001pxsolid;FONT-FAMILY:verdana,tahoma,arial;BACKGROUND-COLOR:#eee

}

.OverDragBox{

}

.DragDragBox{

}

.miniDragBox{

}

.OverDragBox{

BACKGROUND-COLOR:#ffff99

}

.DragDragBox{

BACKGROUND-COLOR:#ffff99

}

.DragDragBox{

FILTER:alpha(opacity=50);BACKGROUND-COLOR:#ff99cc

}

LEGEND{

FONT-WEIGHT:bold;FONT-SIZE:12px;COLOR:#666699;FONT-FAMILY:verdana,tahoma,arial

}

FIELDSET{

PADDING-RIGHT:3px;PADDING-LEFT:3px;PADDING-BOTTOM:3px;PADDING-TOP:3px

}

.History{

FONT-SIZE:10px;OVERFLOW:auto;WIDTH:100%;FONT-FAMILY:verdana,tahoma,arial;HEIGHT:82px

}

#DragContainer8{

BORDER-RIGHT:#6699991pxsolid;PADDING-RIGHT:0px;BORDER-TOP:#6699991pxsolid;PADDING-LEFT:5px;PADDING-BOTTOM:0px;BORDER-LEFT:#6699991pxsolid;WIDTH:110px;PADDING-TOP:5px;BORDER-BOTTOM:#6699991pxsolid;HEIGHT:110px

}

.miniDragBox{

FLOAT:left;MARGIN:0px5px5px0px;WIDTH:20px;HEIGHT:20px

}

pre{border:1solid#CCC;background-color:#F8F8F0;padding:10px;}

</style>

<scriptcontent="text/javascript">

//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;i<arguments.length;i++){

varcObj=arguments[i];

DragDrops[cDrag].push(cObj);

cObj.setAttribute('DropObj',cDrag);

Everytopleveliteminthesecontainersshouldbedraggable.Dothis

bysettingtheDragObjattributeoneachitemandthenlaterchecking

thisattributeinthemouseMovefunction

for(varj=0;j<cObj.childNodes.length;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<dragHelper.childNodes.length;i++)dragHelper.removeChild(dragHelper.childNodes[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;i<dragConts.length;i++){

with(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;j<dragConts[i].childNodes.length;j++){

with(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;i<dragConts.length;i++){

with(dragConts[i]){

if(((getAttribute('startLeft'))<xPos)&&

((getAttribute('startTop'))<yPos)&&

((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);

}

</script>

<divclass="DragContainer"id="DragContainer1">

<divclass="DragBox"id="Item1"overClass="OverDragBox"dragClass="DragDragBox">Item#1</div>

<divclass="DragBox"id="Item2"overClass="OverDragBox"dragClass="DragDragBox">Item#2</div>

<divclass="DragBox"id="Item3"overClass="OverDragBox"dragClass="DragDragBox">Item#3</div>

<divclass="DragBox"id="Item4"overClass="OverDragBox"dragClass="DragDragBox">Item#4</div>

</div>

<divclass="DragContainer"id="DragContainer2">

<divclass="DragBox"id="Item5"overClass="OverDragBox"dragClass="DragDragBox">Item#5</div>

<divclass="DragBox"id="Item6"overClass="OverDragBox"dragClass="DragDragBox">Item#6</div>

<divclass="DragBox"id="Item7"overClass="OverDragBox"dragClass="DragDragBox">Item#7</div>

<divclass="DragBox"id="Item8"overClass="OverDragBox"dragClass="DragDragBox">Item#8</div>

</div>

<divclass="DragContainer"id="DragContainer3">

<divclass="DragBox"id="Item9"overClass="OverDragBox"dragClass="DragDragBox">Item#9</div>

<divclass="DragBox"id="Item10"overClass="OverDragBox"dragClass="DragDragBox">Item#10</div>

<divclass="DragBox"id="Item11"overClass="OverDragBox"dragClass="DragDragBox">Item#11</div>

<divclass="DragBox"id="Item12"overClass="OverDragBox"dragClass="DragDragBox">Item#12</div>

</div>

【拖动Html元素集合 Drag and Drop any item】相关文章：

★ JSON与XML优缺点对比分析

★ jquery表单对象属性过滤选择器用法

★ 解密效果

★ 一个很简单的办法实现TD的加亮效果.

★ 些很实用且必用的小脚本代码

★ JQuery中DOM事件绑定用法详解

★ JS通过Cookie判断页面是否为首次打开

★ javascript正则表达式总结

★ jquery简单实现外部链接用新窗口打开的方法

★ JavaScript容易犯错的九个陷阱

上一篇：拖动一个HTML元素

下一篇： JavaScript使用prototype定义对象类型(转)[

学习工具