- 浏览: 21496603 次
- 性别:
- 来自: 杭州
最新评论
-
ZY199266:
配置文件还需要额外的配置ma
Android 客户端通过内置API(HttpClient) 访问 服务器(用Spring MVC 架构) 返回的json数据全过程 -
ZY199266:
我的一访问为什么是 /mavenwebdemo/WEB-I ...
Android 客户端通过内置API(HttpClient) 访问 服务器(用Spring MVC 架构) 返回的json数据全过程 -
lvgaga:
我又一个问题就是 如果像你的这种形式写。配置文件还需要额外的 ...
Android 客户端通过内置API(HttpClient) 访问 服务器(用Spring MVC 架构) 返回的json数据全过程 -
lvgaga:
我的一访问为什么是 /mavenwebdemo/WEB-I ...
Android 客户端通过内置API(HttpClient) 访问 服务器(用Spring MVC 架构) 返回的json数据全过程 -
y1210251848:
你的那个错误应该是项目所使用的目标框架不支持吧
log4net配置(web中使用log4net,把web.config放在单独的文件中)
[转]如何在 JavaScript 中实现拖放
来源:http://www.javaeye.com/post/152142
译者说明:
终于完成了全文的翻译,由于时间比较参促,文章没有过多的校正与润色,阅读过程中难免会有些许生硬或不准确的感觉,请大家见量并指出,方便他人阅读。
原文作者将拖放功能的实现分步讲解,其核心的地方在于移动和放置元素时,鼠标、移动元素、目标元素关系的处理,只要这个问题处理好了,代码就很容易理解,译文仅供辅助参考之用,demo可以参考原文链接。
[翻译]如何在 JavaScript 中实现拖放
JavaScript擅长于修改页面中的DOM元素,但是我们使用JavaScript通常只是实现一些简单功能,例如实现图片的翻转,网页中的标签页,等等。这篇文章将向你展示如何在页面中,对创建的元素实现拖放。
有许多理由让你在页面中加入拖放的功能,其中最简单的理由是重新组织数据。举个例子,你可能希望用户能够重组一系列的页面元素,通过放置一个input或 select组件在各个元素的旁边来代表它们的顺序是一种解决方案,使该组元素可以被拖放是一种替代方案。或者也许你想在网站上拥有一个可以被用户移动的导航窗口。这些都是使用拖放功能的简单理由,因为你能够实现!
在你的网页上实现拖放的效果并不是很复杂。首先,我们知道鼠标的位置,然后我们需要了解用户什么时候点击一个元素,以至于我们知道要准备开始拖动它,最后我们要移动这个元素。
捕获鼠标的移动
第一步,我们需要获取鼠标的坐标,通过一个函数并赋给document.onmousemove可以实现这一功能:
- document.onmousemove=mouseMove;
- functionmouseMove(ev){
- ev=ev||window.event;
- varmousePos=mouseCoords(ev);
- }
- 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
- };
- }
首先我们需要解释一下event对象。不论你什么时候移动、点击鼠标,或按键,等等,一个事件都会发生。在IE中,这个事件是全局的,它被存储在 window.event中,对于Firefox,及其他的浏览器来说,这个事件将被传递到任何指向这个页面动作的函数中。因此,我们使 document.onmousemove指向鼠标移动的函数,鼠标移动的函数获得事件对象。
上述代码中,ev在所有浏览器环境中都包含了event对象。在Firefox里,"||window.event"将被忽略,因为它已经包含事件。在IE中,ev的值为空,以至于需要将它的值设置为window.event。
本文中我们需要多次捕获到鼠标的坐标,因此我们写了一个mouseCoords方法,它有一个参数:event。
我们要再次讨论IE和其他浏览器之间的差异。Firefox和其他的浏览器使用event.pageX和event.pageY来表示鼠标相对于 document文档的位置。如果你有一个500*500的窗口,并且鼠标位于窗口中间,那么pageX和pageY的值将都是250。如果你将窗口向下滚动500象素,pageY的值为750。
如此相反的是,微软的IE使用event.clientX和event.clientY来表示鼠标相对于window窗口的位置,而不是当前 document文档。在相同的例子中,如果将鼠标放置于500*500窗口的中间,clientX和clientY值将均为250。如果向下滚动页面, clientY将仍为250,因为它是相对于window窗口来测量,而不是当前的document文档。因此,在鼠标位置中,我们应该引入 document文档body区域的scrollLeft和scrollTop属性。最后,IE中document文档实际并不在(0,0)的位置,在它周围有一个小(通常有2px)边框,document.body.clientLeft和document.body.clientTop包含了这个边框的宽度,从而还需要在鼠标位置中引入它们。
幸运的是,现在我们拥有了mouseCoords函数,不用再为获取鼠标位置担心了。
捕获鼠标的点击
下一步,我们必须知道鼠标何时点击及何时释放。如果我们跳过这一步,只要你的鼠标移动经过这些元素时,都将产生拖动这些元素的效果,这是令人讨厌并违反人的直觉的。
在这里,有两个函数可以帮助我们:onmousedown和onmouseup。先前我们已将document.onmousemove指向一个函数,因此从逻辑上似乎应该使document.onmousedown和document.onmouseup都指向函数。如果我们让 document.onmousedown指向一个函数,那么这个函数将会因为鼠标点击任何元素而执行:文本、图像、表格,等等。我们只想页面中特定的元素具有被拖放的功能,因此,我们可以通过如下方法实现:
- document.onmouseup=mouseUp;
- vardragObject=null;
- functionmakeClickable(object){
- object.onmousedown=function(){
- dragObject=this;
- }
- }
- functionmouseUp(ev){
- dragObject=null;
- }
我们现在有了一个变量dragObject,包含了你点击的任何元素。当你释放鼠标的时候,dragObject被设置为空,从而在dragObject非空的时候,我们需要进行拖动操作。
移动元素
我们现在已经知道如何捕获鼠标移动和点击。接下来需要做的就是移动任何我们想拖动的元素。首先,将一个元素准确移动到页面上我们想要的位置,该元素样式表的position值必须为absolute,这意味着你可以设置它的style.top或style.left,测量值相对于页面的左上角,因为我们所有的鼠标移动都是相对于页面左上角的,通常都是这样。
一旦我们设置了item.style.position='absolute',接下来就需要改变该元素top和left的位置,使它移动!
- document.onmousemove=mouseMove;
- document.onmouseup=mouseUp;
- vardragObject=null;
- varmouseOffset=null;
- 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;
- top+=e.offsetTop;
- e=e.offsetParent;
- }
- left+=e.offsetLeft;
- top+=e.offsetTop;
- return{x:left,y:top};
- }
- functionmouseMove(ev){
- ev=ev||window.event;
- varmousePos=mouseCoords(ev);
- if(dragObject){
- dragObject.style.position='absolute';
- dragObject.style.top=mousePos.y-mouseOffset.y;
- dragObject.style.left=mousePos.x-mouseOffset.x;
- returnfalse;
- }
- }
- functionmouseUp(){
- dragObject=null;
- }
- functionmakeDraggable(item){
- if(!item)return;
- item.onmousedown=function(ev){
- dragObject=this;
- mouseOffset=getMouseOffset(this,ev);
- returnfalse;
- }
- }
你会注意到这些代码是以我们前面的例子为基础的(参考上篇文章),将它们放置在一起,你将能够随意的去移动元素。
当我们点击一个元素时,存储了另外的一个变量,mouseOffset。mouseOffset简单的包含了我们点击元素的位置信息。如果我们有一张 20*20px的图像,然后点击图像的中间,mouseOffset应该是{x:10, y:10}。如果我们点击图像的左上角,mouseOffset应为{x:0, y:0}。我们在鼠标移动后的位置信息中用到它。如果我们没有存储这个值,不论你点击元素的哪一个位置,元素相对于鼠标的位置都将会是相同的。
mouseOffset函数用到了另外一个函数getPosition。getPosition目的是返回元素相对于documemt文档的坐标位置。如果我们简单的去读取item.offsetLeft或item.style.left,得到的将是元素相对于它父元素的位置,而不是document文档的。在我们的脚本中,所有的元素都是相对于document文档的,因此需要这样做。
要完成获取元素相对于document文档位置的工作,getPosition从它自身的父级开始,循环获取它的left和top的值并累加,这样我们就得到了我们想要的元素距文档顶部和左侧的累计值。
当我们获取了这条信息并移动鼠标的时候,mouseMove开始运行。首先我们需要保证item.style.position值为absolute,接着,我们将元素移动到任何一个地方,鼠标位置都会减去我们之前记录的鼠标相对于元素的偏移量。当鼠标释放时,dragObject将被设置为null,并且mouseMove函数不再做任何事情。
放置元素
我们前面的例子已经处理了这个问题,仅仅是拖动一个元素,然后将它放下。然后,在我们放下元素的时候通常还有其他的目的,我们以拖动元素到垃圾回收站为例,或我们可能想让该元素和页面中某个特定的区域对齐。
不幸的是我们在这里进入了一个相对主要的问题。因为我们正在移动的元素总是直接处于我们的鼠标下,而不可能去引发mouseover、 mousedown、mouseup或鼠标对页面中其他元素的操作。如果你移动一个元素到垃圾回收站,你的鼠标会一直在移动元素的上方,而不是垃圾回收站。
那么我们该如何处理这个问题呢?这里有几种解决方案。在前面所提到的mouseOffset的目的是保证元素总是在鼠标下方正确的位置,如果你忽视了这点,然后总是使得元素在鼠标的右下方,你的鼠标将不会被你正在拖动的元素所隐藏,我们也不会碰到问题。但事实上往往不会这样,为了美观我们通常要保持元素在鼠标的下方。
另外一种选择是不移动你正在拖动的元素,你可以改变鼠标样式,来告诉使用者你正在拖动一个元素,直到你将它放置到某个地方。这解决了我们的问题,但是带来了和前面一种方案面临的同样问题:美观。
我们最后的一种解决方案既不影响你正在移动的元素,也不影响移动终点位置上的元素(例如垃圾回收站)。不幸的是,这比前面两种解决方案的难度更大。我们将要做的是获得一组我们要放置的目标,当鼠标释放时,我们手工检查当前鼠标相对于每个目标的位置,看鼠标是否释放在这个目标中某一个目标的位置上,如果是的,我们就知道我们已经将元素放置在我们的目标上了。
- /**//*
- Allcodefromthepreviousexampleisneededwiththeexception
- ofthemouseUpfunctionwhichisreplacedbelow
- */
- vardropTargets=[];
- functionaddDropTarget(dropTarget){
- dropTargets.push(dropTarget);
- }
- functionmouseUp(ev){
- ev=ev||window.event;
- varmousePos=mouseCoords(ev);
- for(vari=0;i
- varcurTarget=dropTargets[i];
- vartargPos=getPosition(curTarget);
- vartargWidth=parseInt(curTarget.offsetWidth);
- vartargHeight=parseInt(curTarget.offsetHeight);
- if(
- (mousePos.x>targPos.x)&&
- (mousePos.
- (mousePos.y>targPos.y)&&
- (mousePos.y
- //dragObjectwasdroppedontocurTarget!
- }
- }
- dragObject=null;
- }
这个例子中当鼠标释放时,我们循环每个可能放置元素的目标,如果鼠标指针在目标上,我们则拥有了一个放置元素的事件,通过鼠标横坐标大于目标元素左侧横坐标(mousePos.x>targPos.x),小于目标元素右侧横坐标(mousePos.x
整合所有的功能
最后我们使用所有代码片断,来创建一个完整的拖放函数脚本。我们所要做的第一件事情是DOM操作,如果你对此并不十分熟悉,可以阅读《JavaScript Primer on DOM Manipulation》。
接下来的代码创建容器和容器组,使得在这些容器中可以拖动每个元素,这在本文第二个demo的基础上来完成。这段代码能够用来重新规划元素的顺序,将导航窗口放在页面的左侧或右侧,或再加入你所能想到的其他的功能。
我们将使用伪代码来一步步进行讲解,将真实的代码通过注释的方式留给读者查看。
1.当文档第一次被加载时,我们创建一个名为dragHelper的DIV标签,当我们开始移动一个元素的时候,dragHelper将成为一个隐藏元素,可以四处移动。真实的元素并不会被拖动,仅仅使用insertBefore和appendChild来移动。我们在开始的时候隐藏dragHelper。
2.我们创建mouseDown和mouseUp函数。起初,所有的这些函数都假设记录了鼠标按钮的状态,以至于iMouseDown变量在鼠标按下的时候为true,没有按下的时候为false。
3.我们创建一个全局变量DragDrops,以及一个函数CreateDragContainer。DragDrops包含一组相互关联的容器。传入CreateDragContainer的任何变量(代表容器)被组织成一个新的集合,使元素能够在这些容器间自由移动。通过setAttribute,CreateDragContainer函数同样将各容器中的元素绑定在一起。
4.现在我们的代码知道每个元素所在的集合,现在来看mouseMove函数。mouseMove函数首先设置了一个变量target,表示鼠标下面的目标元素,如果这个元素在集合(用getAttribute判断)中就继续下面操作:
4.1.首先,在必要的时候,我们运行一个简单的脚本来改变目标元素的class属性,这样就创造了一个翻动的效果。
4.2.然后我们检查鼠标是否点击(因为我们的代码已经运行到这里),如果事件发生:
4.2.1.设置变量curTarget为当前元素。
4.2.2.记录元素当前在文档中的位置,以便在需要的时候可以将它的值取回。
4.2.3.将当前元素克隆到dragHelper,使得我们能够移动元素的隐藏备份。
4.2.4.因为在dragHelper中我们完全拥有了拖动元素的一个备份,这个元素会始终在鼠标下,我们必须移除dragObj属性,让代码知道dragObj已不在集合中。
4.2.5.我们快速记录集合中每个元素当前的位置、宽度和高度。当元素第一次开始被拖动时,我们仅需做一次这种工作,否则每当鼠标移动的时候我们都必须做一次,甚至一秒内几百次。
4.3.如果鼠标没有点击,要么我们和之前拥有同样的目标元素,要么没有目标元素,不论哪种情况我们都不会做任何事情。
5.现在我们检查curTarget变量。curTarget应该仅包含一个被拖动的对象,因此如果它存在,表示我们正在拖动一个元素:
5.1.移动隐藏DIV到鼠标,这个元素和文章前面所创建的元素一样能够被拖动。
5.2.然后我们检查鼠标是否存在于当前集合中每个容器中。
5.2.1.如果鼠标在某个容器中,我们检查容器中的每个元素,查看我们正拖动的元素属于哪个位置。
5.2.2.然后我们将所拖动的元素放置在容器中另一个元素的前面,或容器的最后位置。
5.2.3.最后我们确定元素可见。
6.剩下的事情就是捕获mouseUp事件:
6.1.首先需要隐藏dragHelper:它不再被需要,因为我们没有拖动任何东西。
6.2.如果拖动的元素是可见的,它已经存在于任何它所属的容器中,所有工作已完成。
6.3.如果拖动的元素不可见,我们将它放回它原来所在的地方。
/**//*
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;iarguments.length;i++){
varcObj=arguments[i];
DragDrops[cDrag].push(cObj);
cObj.setAttribute('DropObj',cDrag);
/**//*
Everytopleveliteminthesecontainersshouldbedraggable.Dothis
bysettingtheDragObjattributeoneachitemandthenlaterchecking
thisattributeinthemouseMovefunction
*/
for(varj=0;jcObj.childNodes.length;j++){
//Firefoxputsinlotsof#textnodesskipthese
if(cObj.childNodes[j].nodeName=='#text')continue;
cObj.childNodes[j].setAttribute('DragObj',cDrag);
}
}
}
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;idragHelper.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;idragConts.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;jdragConts[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;idragConts.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);
}
divclass="DragContainer"id="DragContainer1">
divclass="DragBox"id="Item1"overClass="OverDragBox"dragClass="DragDragBox">Item#1div>
divclass="DragBox"id="Item2"overClass="OverDragBox"dragClass="DragDragBox">Item#2div>
divclass="DragBox"id="Item3"overClass="OverDragBox"dragClass="DragDragBox">Item#3div>
divclass="DragBox"id="Item4"overClass="OverDragBox"dragClass="DragDragBox">Item#4div>
div>
divclass="DragContainer"id="DragContainer2">
divclass="DragBox"id="Item5"overClass="OverDragBox"dragClass="DragDragBox">Item#5div>
divclass="DragBox"id="Item6"overClass="OverDragBox"dragClass="DragDragBox">Item#6div>
divclass="DragBox"id="Item7"overClass="OverDragBox"dragClass="DragDragBox">Item#7div>
divclass="DragBox"id="Item8"overClass="OverDragBox"dragClass="DragDragBox">Item#8div>
div>
divclass="DragContainer"id="DragContainer3">
divclass="DragBox"id="Item9"overClass="OverDragBox"dragClass="DragDragBox">Item#9div>
divclass="DragBox"id="Item10"overClass="OverDragBox"dragClass="DragDragBox">Item#10div>
divclass="DragBox"id="Item11"overClass="OverDragBox"dragClass="DragDragBox">Item#11div>
divclass="DragBox"id="Item12"overClass="OverDragBox"dragClass="DragDragBox">Item#12div>
div>
关于作者
Mark Kahn是一位Web Developer、DBA。可以通过这个网址跟他联系:http://www.jslibrary.org
原文链接:http://www.webreference.com/programming/javascript/mk/column2/3.html
译文链接:http://www.blogjava.net/flyingis/archive/2006/10/15/75277.html
相关推荐
HTML5中实现拖放效果无须借助javascript.docx
如何利用vue.js实现拖放功能 添加拖放功能是使你的程序更加自然和友好的方法。尽管有一些提供拖放功能的库,但是了解它们在底层的工作原理是非常有意义的。 在本文中,我们将用内置的 HTML 拖放 API 来实现简单的...
javascript 拖放效果实现代码.docx
javascript 实现div区域拖放
dataTransfer对象用于从被拖动元素向放置目标传递字符串数据。因为这个对象是 event 的属性,所以在拖放事件的事件处理程序外部无法访问 data...在事件处理程序内部,可以使用这个对象的属性和方法实现拖放功能。
用javascript实现的div拖放功能
主要介绍了javascript实现拖放效果的相关资料,需要的朋友可以参考下
interact.js实现JavaScript拖放,调整大小和多点触摸惯性和捕捉手势
本文实例讲述了JavaScript实现的多种鼠标拖放效果。分享给大家供大家参考,具体如下: 这是一款JavaScript鼠标拖放效果代码,通过本示例了解触发对象,设置范围限制,指定容器大小水平及垂直锁定,还包括获取和释放...
本文通过实例代码给大家介绍了JavaScript 实现拖放功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
NULL 博文链接:https://yiminghe.iteye.com/blog/336951
不使用javascript实现拖放效果,一直以来都是网友们所希望看到的,二今天html5却做到了接下来详细为您介绍,需要了解的朋友可以参考下
客户端是使用HTML,CSS和Javascript实现的。 服务器端是使用Javascript和Perl实现的。 项目演示: : 该项目已部署在本地服务器(XAMPP)上。 配置XAMPP的步骤(Windows) 1)从XAMPP控制面板启动Apache服务器...
Dragula 是一个 JavaScript 库,实现了网页上的拖放功能。提供 JavaScript、AngularJS 和 React 版本。示例代码:dragula([left, right]).on('drag', function (el) { el.className = el.className.replace...
JavaScript擅长于修改页面中的DOM元素,但是我们使用JavaScript通常只是实现一些简单功能,例如实现图片的翻转,网页中的标签页,等等。这篇文章将向你展示如何在页面中,对创建的元素实现拖放。