你首先要声明一个evnet对象.不论何时你移动鼠标/点击/按键等等,会对应一个event的事件.在Internet Explorer里event是全局变量,会被存储在window.event里. 在firefox中,或者其他浏览器,event事件会被相应的自定义函数获取.当我们将mouseMove函数赋值于document.onmousemove,mouseMove会获取鼠标移动事件.
(ev = ev || window.event) 这样让ev在所有浏览器下获取了event事件,在Firefox下"||window.event"将不起作用,因为ev已经有了赋值.在MSIE下ev是空的,所以ev将设置为window.event.
因为我们在这篇文章中需要多次获取鼠标坐标,所以我们设计了mouseCoords这个函数,它只包含了一个参数,就是the event.
我们需要运行在MSIE与Firefox为首的其他浏览器下.Firefox以event.pageX和event.pageY来代表鼠标相应于文 档左上角的位置.如果你有一个500*500的窗口,而且你的鼠标在正中间,那么paegX和pageY将是250,当你将页面往下滚动500px,那么 pageY将是750.此时pageX不变,还是250.
MSIE和这个相反,MSIE将event.clientX与event.clientY来代表鼠标与ie窗口的位置,并不是文档.当我们有一个 500*500的窗口,鼠标在正中间,那么clientX与clientY也是250,如果你垂直滚动窗口到任何位置,clientY仍然是250,因为 相对ie窗口并没有变化.想得到正确的结果,我们必须加入scrollLeft与scrollTop这两个相对于文档鼠标位置的属性.最后,由于MSIE 并没有0,0的文档起始位置,因为通常会设置2px的边框在周围,边框的宽度包含在document.body.clientLeft与 clientTop这两个属性中,我们再加入这些到鼠标的位置中.
这里有两个函数帮助我们:onmousedown与onmouseup.我们预先设置函数来接收document.onmousemove,这样看 起来很象我们会获取document.onmousedown与document.onmouseup.但是当我们获取 document.onmousedown时,我们同时获取了任何对象的点击属性如:text,images,tables等等.我们只想获取那些需要拖 拽的属性,所以我们设置函数来获取我们需要移动的对象.
<script>
functionmouseDown(ev){
ev=ev||window.event;
vartarget=ev.target||ev.srcElement;
if(target.onmousedown||target.getAttribute('DragObj')){
returnfalse;
}
}
functionmakeClickable(item){
if(!item)return;
item.onmousedown=function(ev){
document.getElementById('ClickImage').value=this.name;
}
}
document.onmousedown=mouseDown;
window.onload=function(){
makeClickable(document.getElementById('ClickImage1'));
makeClickable(document.getElementById('ClickImage2'));
makeClickable(document.getElementById('ClickImage3'));
makeClickable(document.getElementById('ClickImage4'));
}</script>
<FIELDSETid=Demo3>
<h3>
Demo-Clickanyimage
</h3>
<IMGid=ClickImage1
src="/articleimg/2006/07/3791/drag_drop_spade.gif"
name=Spade><IMGid=ClickImage2
src="/articleimg/2006/07/3791/drag_drop_heart.gif"
name=Heart><IMGid=ClickImage3
src="/articleimg/2006/07/3791/drag_drop_diamond.gif"
name=Diamond><IMGid=ClickImage4
src="/articleimg/2006/07/3791/drag_drop_club.gif"
name=Club>
<BR>Youclickedon:<INPUTid=ClickImagetype="text"></FIELDSET>
移动一个元素
我们知道了怎么捕捉鼠标移动与点击.剩下的就是移动元素了.首先,要确定一个明确的页面位置,css样式表 要用'absolute'.设置元素绝对位置意味着我们可以用样式表的.top和.left来定位,可以用相对位置来定位了.我们将鼠标的移动全部相对页 面top-left,基于这点,我们可以进行下一步了.
当我们定义item.style.position='absolute',所有的操作都是改变left坐标与top坐标,然后它移动了.
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
var dragObject = null;
var mouseOffset = null;
function getMouseOffset(target, ev){
ev = ev || window.event;
var docPos = getPosition(target);
var mousePos = mouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}
function getPosition(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};
}
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mouseCoords(ev);
if(dragObject){
dragObject.style.position = 'absolute';
dragObject.style.top = mousePos.y - mouseOffset.y;
dragObject.style.left = mousePos.x - mouseOffset.x;
return false;
}
}
function mouseUp(){
dragObject = null;
}
function makeDraggable(item){
if(!item) return;
item.onmousedown = function(ev){
dragObject = this;
mouseOffset = getMouseOffset(this, ev);
return false;
}
}
你会注意到这个代码几乎是前面的全集,将前面的合在一起就实现了拖拽效果了.
当我们点击一个item时,我们就获取了很多变量,如鼠标位置,鼠标位置自然就包含了那个item的坐标信 息了.如果我们点击了一个20*20px图像的正中间,那么鼠标的相对坐标为{x:10,y:10}.当我们点击这个图像的左上角那么鼠标的相对坐标为 {x:0,y:0}.当我们点击时,我们用这个方法取得一些鼠标与图片校对的信息.如果我们不能加载页面item,那么信息将是document信息,会 忽略了点击的item信息.
mouseOffset函数使用了另一个函数getPosition.getPosition的作用是返回 item相对页面左上角的坐标,如果我们尝试获取item.offsetLeft或者item.style.left,那么我们将取得item相对与父级 的位置,不是整个document.所有的脚本我们都是相对整个document,这样会更好一些.
为了完成getPosition任务,必须循环取得item的父级,我们将加载内容到item的左/上的位置.我们需要管理想要的top与left列表.
自从定义了mousemove这个函数,mouseMove就会一直运行.第一我们确定item的 style.position为absolute,第二我们移动item到前面定义好的位置.当mouse点击被释放,dragObject被设置为 null,mouseMove将不在做任何事.
Dropping an Item
前面的例子目的很简单,就是拖拽item到我们希望到的地方.我们经常还有其他目的如删除item,比如我们可以将item拖到垃圾桶里,或者其他页面定义的位置.
很不幸,我们有一个很大的难题,当我们拖拽,item会在鼠标之下,比如mouseove,mousedown,mouseup或者其他mouse action.如果我们拖拽一个item到垃圾桶上,鼠标信息还在item上,不在垃圾桶上.
怎么解决这个问题呢?有几个方法可以来解决.第一,这是以前比较推荐的,我们在移动鼠标时item会跟随鼠 标,并占用了mouseover/mousemove等鼠标事件,我们不这样做,只是让item跟随着鼠标,并不占用mouseover等鼠标事件,这样 会解决问题,但是这样并不好看,我们还是希望item能直接跟在mouse下.
另一个选择是不做item的拖拽.你可以改变鼠标指针来显示需要拖拽的item,然后放在鼠标释放的位置.这个解决方案,也是因为美学原因不予接受.
最后的解决方案是,我们并不去除拖拽效果.这种方法比前两种繁杂许多,我们需要定义我们需要释放目标的列表,当鼠标释放时,手工去检查释放的位置是否是在目标列表位置上,如果在,说明是释放在目标位置上了.
/*
All code from the previous example is needed with the exception
of the mouseUp function which is replaced below
*/
var dropTargets = [];
function addDropTarget(dropTarget){
dropTargets.push(dropTarget);
}
function mouseUp(ev){
ev = ev || window.event;
var mousePos = mouseCoords(ev);
for(var i=0; i<dropTargets.length; i++){
var curTarget = dropTargets[i];
var targPos = getPosition(curTarget);
var targWidth = parseInt(curTarget.offsetWidth);
var targHeight = parseInt(curTarget.offsetHeight);
if(
(mousePos.x > targPos.x) &&
(mousePos.x < (targPos.x + targWidth)) &&
(mousePos.y > targPos.y) &&
(mousePos.y < (targPos.y + targHeight))){
// dragObject was dropped onto curTarget!
}
}
dragObject = null;
}
鼠标释放时会去取是否有drop属性,如果存在,同时鼠标指针还在drop的范围内,执行drop操作.我们检查鼠标指针位置是否在目 标范围是用(mousePos.x>targetPos.x),而且还要符合条件(mousePos.x<(targPos.x + targWidth)).如果所有的条件符合,说明指针确实在范围内,可以执行drop指令了.
Pulling It All Together
最后我们拥有了所有的drag/drop的脚本片断!下一个事情是我们将创建一个DOM处理.如果你不是很熟悉,请先阅读我的JavaScript Primer on DOM Manipulation.
下面的代码将创建container(容器),而且使任何一个需要drag/drop的item变成一个容器的item.代码在这个文章第二个demo的后面,它可以用户记录一个list(列表),定为一个导航窗口在左边或者右边,或者更多的函数你可以想到的.
下一步我们将通过"假代码"让reader看到真代码,下面为推荐:
1、当document第一次载入时,创建dragHelper DIV.dragHelper将给移动的item加阴影.真实的item没有被dragged,只是用了insertBefor和appendChild来移动了,我们隐藏了dragHelper
2、有了mouseDown与mouseUp函数.所有的操作会对应到当到iMouseDown的状态中,只有当mouse左键为按下时iMouseDown才为真,否则为假.
3、我们创建了全局变量DragDrops与全局函数CreateDragContainer.DragDrops包含了一系列相对彼 此的容器.任何参数(containers)将通过CreatedcragContainer进行重组与序列化,这样可以自由的移 动.CreateDragContainer函数也将item进行绑定与设置属性.
4、现在我们的代码知道每个item的加入,当我们移动处mouseMove,mouseMove函数首先会设置变量target,鼠标移动在上面的item,如果这个item在容器中(checked with getAttribute):
- 运行一小段代码来改变目标的样式.创造rollover效果
- 检查鼠标是否没有放开,如果没有
- 设置curTarget代表当前item
- 记录item的当前位置,如果需要的话,我们可以将它返回
- 克隆当前的item到dragHelper中,我们可以移动带阴影效果的item.
- item拷贝到dragHelper后,原有的item还在鼠标指针下,我们必须删除掉dragObj,这样脚本起作用,dragObj被包含在一个容器中.
- 抓取容器中所有的item当前坐标,高度/宽度,这样只需要记录一次,当item被drag时,每随mouse移动,每移钟就会记录成千上万次.
- 如果没有,不需要做任何事,因为这不是一个需要移动的item
5、检查curTarget,它应该包含一个被移动的item,如果存在,进行下面操作:
- 开始移动带有阴影的item,这个item就是前文所创建的
- 检查每个当前容器中的container,是否鼠标已经移动到这些范围内了
- 我们检查看一下正在拖动的item是属于哪个container
- 放置item在一个container的某一个item之前,或者整个container之后
- 确认item是可见的
- 如果鼠标不在container中,确认item是不可见了.
6、剩下的事就是捕捉mouseUp的事件了
实现一个拖动的全代码:
Code
<STYLE>LI{
MARGIN-BOTTOM:10px
}
OL{
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{
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{
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{
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
}
.DragDragBox{
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
}
.miniDragBox{
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{
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>
<script>
//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#textnodesskipthese
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>
<!--themouseoveranddraggingclassaredefinedoneachitem-->
<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>
优质内容筛选与推荐>>
1、从客户端...中检测到有潜在危险的 Request.Form 值2、一房难求~~3、在VS.NET中给xsl文件增加智能感知功能4、Asp.Net中页面间传值方法5、《3S新闻周刊》第10期,本期策划:“超女”营销带来的启示
长按二维码向我转账
受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。