|
以前在网上看到的最简单的拖动对象的代码忘记作者叫什么了原始代码在IE下有些小问题并且声明了文档类型为xhtml 后在FF等非IE浏览器下无效对其进行了改进现在已经可兼容:IEFirefoxOpera 以下代码只是演示原理具体应用请结合你自己的实际需求进行修改 <!doctypehtmlpublic//WC//DTDXHTMLTransitional//ENtransitionaldtd> <htmlxmlns=lang=gb> <head> <title>代码实例拖动对象DragObject(兼容:IEFirefoxOpera)</title> <metahttpequiv=contenttypecontent=text/html;charset=gb/> <metaname=editorcontent=枫巖> <metaname=keywordscontent=代码实例拖动对象> <metaname=descriptioncontent=最简短的拖动对象代码实例演示> <style> dragAble{position:relative;cursor:move;} </style> <scriptlanguage=javascript> <! //Author:Unkonw //Modify:枫巖 varie=documentall; varnn=documentgetElementById&&!documentall; varisdrag=false; varyx; varoDragObj; functionmoveMouse(e){ if(isdrag){ oDragObjstyletop=(nn?nTY+eclientYy:nTY+eventclientYy)+px; oDragObjstyleleft=(nn?nTX+eclientXx:nTX+eventclientXx)+px; returnfalse; } } functioninitDrag(e){ varoDragHandle=nn?etarget:eventsrcElement; vartopElement=HTML; while(oDragHandletagName!=topElement&&oDragHandleclassName!=dragAble){ oDragHandle=nn?oDragHandleparentNode:oDragHandleparentElement; } if(oDragHandleclassName==dragAble){ isdrag=true; oDragObj=oDragHandle; nTY=parseInt(oDragObjstyletop+); y=nn?eclientY:eventclientY; nTX=parseInt(oDragObjstyleleft+); x=nn?eclientX:eventclientX; documentonmousemove=moveMouse; returnfalse; } } documentonmousedown=initDrag; documentonmouseup=newFunction(isdrag=false); //> </script> </head> <body> <imgsrc=_//gifclass=dragAble/> <imgsrc=_//gifclass=dragAble/> <imgsrc=_//gifclass=dragAble/><br/><br/> <divclass=dragAble>这些都是可拖动对象</div> </body> </html> |
