资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
DIV任意拖动的问题
<P><html> <head> <title>DRAG the DIV</title> <style> *{font-size:12px} .dragTable{ font-size:12px; border-top:1px solid #3366cc; margin-bottom: 10px; width:100%; background-color:#FFFFFF; } .dragTR{ cursor:move; color:#7787cc; background-color:#e5eef9; } td{vertical-align:top;} #parentTable{ border-collapse:collapse; letter-spacing:25px; } </style> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20defer%3E%0D%0A%2F****JoeLee************E-MAIL%3Ahktx%40163.com****QQ%3A48293707*****11%3A09%202006-2-9******%2F%0D%0A%20var%20draged%3Dfalse%3B%0D%0A%20tdiv%3Dnull%3B%0D%0Afunction%20dragStart()%7B%0D%0A%20ao%3Devent.srcElement%3B%0D%0A%20if((ao.tagName%3D%3D%22TD%22)%7C%7C(ao.tagName%3D%3D%22TR%22))ao%3Dao.offsetParent%3B%0D%0A%20else%20return%3B%0D%0A%20draged%3Dtrue%3B%0D%0A%20tdiv%3Ddocument.createElement(%22div%22)%3B%0D%0A%20tdiv.innerHTML%3Dao.outerHTML%3B%0D%0A%20tdiv.style.display%3D%22block%22%3B%0D%0A%20tdiv.style.position%3D%22absolute%22%3B%0D%0A%20tdiv.style.filter%3D%22alpha(opacity%3D70)%22%3B%0D%0A%20tdiv.style.cursor%3D%22move%22%3B%0D%0A%20tdiv.style.width%3Dao.offsetWidth%3B%0D%0A%20tdiv.style.height%3Dao.offsetHeight%3B%0D%0A%20tdiv.style.top%3DgetInfo(ao).top%3B%0D%0A%20tdiv.style.left%3DgetInfo(ao).left%3B%0D%0A%20document.body.appendChild(tdiv)%3B%0D%0A%20lastX%3Devent.clientX%3B%0D%0A%20lastY%3Devent.clientY%3B%0D%0A%20lastLeft%3Dtdiv.style.left%3B%0D%0A%20lastTop%3Dtdiv.style.top%3B%0D%0A%20try%7B%0D%0A%20%20ao.dragDrop()%3B%20%0D%0A%20%7Dcatch(e)%7B%7D%0D%0A%7D%0D%0Afunction%20draging()%7B%2F%2F%E9%87%8D%E8%A6%81%3A%E5%88%A4%E6%96%ADMOUSE%E7%9A%84%E4%BD%8D%E7%BD%AE%0D%0A%20if(!draged)return%3B%0D%0A%20var%20tX%3Devent.clientX%3B%0D%0A%20var%20tY%3Devent.clientY%3B%0D%0A%20tdiv.style.left%3DparseInt(lastLeft)%2BtX-lastX%3B%0D%0A%20tdiv.style.top%3DparseInt(lastTop)%2BtY-lastY%3B%0D%0A%20for(var%20i%3D0%3Bi%3CparentTable.cells.length%3Bi%2B%2B)%7B%0D%0A%20%20var%20parentCell%3DgetInfo(parentTable.cells%5Bi%5D)%3B%0D%0A%20%20if(tX%3E%3DparentCell.left%26%26tX%3C%3DparentCell.right%26%26tY%3E%3DparentCell.top%26%26tY%3C%3DparentCell.bottom)%7B%0D%0A%20%20%20var%20subTables%3DparentTable.cells%5Bi%5D.getElementsByTagName(%22table%22)%3B%0D%0A%20%20%20if(subTables.length%3D%3D0)%7B%0D%0A%20%20%20%20if(tX%3E%3DparentCell.left%26%26tX%3C%3DparentCell.right%26%26tY%3E%3DparentCell.top%26%26tY%3C%3DparentCell.bottom)%7B%0D%0A%20%20%20%20%20parentTable.cells%5Bi%5D.appendChild(ao)%3B%0D%0A%20%20%20%20%7D%0D%0A%20%20%20%20break%3B%0D%0A%20%20%20%7D%0D%0A%20%20%20for(var%20j%3D0%3Bj%3CsubTables.length%3Bj%2B%2B)%7B%0D%0A%20%20%20%20var%20subTable%3DgetInfo(subTables%5Bj%5D)%3B%0D%0A%20%20%20%20if(tX%3E%3DsubTable.left%26%26tX%3C%3DsubTable.right%26%26tY%3E%3DsubTable.top%26%26tY%3C%3DsubTable.bottom)%7B%0D%0A%20%20%20%20%20parentTable.cells%5Bi%5D.insertBefore(ao%2CsubTables%5Bj%5D)%3B%0D%0A%20%20%20%20%20break%3B%0D%0A%20%20%20%20%7Delse%7B%0D%0A%20%20%20%20%20parentTable.cells%5Bi%5D.appendChild(ao)%3B%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%7D%0D%0A%20%20%7D%0D%0A%20%7D%0D%0A%7D%3C%2FP%3E%0D%0A%3CP%3Efunction%20dragEnd()%7B%0D%0A%20if(!draged)return%3B%0D%0A%20draged%3Dfalse%3B%0D%0A%20mm%3Dff(150%2C15)%3B%0D%0A%7D%0D%0Afunction%20getInfo(o)%7B%2F%2F%E5%8F%96%E5%BE%97%E5%9D%90%E6%A0%87%0D%0A%20var%20to%3Dnew%20Object()%3B%0D%0A%20to.left%3Dto.right%3Dto.top%3Dto.bottom%3D0%3B%0D%0A%20var%20twidth%3Do.offsetWidth%3B%0D%0A%20var%20theight%3Do.offsetHeight%3B%0D%0A%20while(o!%3Ddocument.body)%7B%0D%0A%20%20to.left%2B%3Do.offsetLeft%3B%0D%0A%20%20to.top%2B%3Do.offsetTop%3B%0D%0A%20%20o%3Do.offsetParent%3B%0D%0A%20%7D%0D%0A%20%20to.right%3Dto.left%2Btwidth%3B%0D%0A%20%20to.bottom%3Dto.top%2Btheight%3B%0D%0A%20return%20to%3B%0D%0A%7D%0D%0Afunction%20ff(aa%2Cab)%7B%2F%2F%E4%BB%8EGOOGLE%E7%BD%91%E7%AB%99%E6%9D%A5%2C%E7%94%A8%E4%BA%8E%E6%81%A2%E5%A4%8D%E4%BD%8D%E7%BD%AE%0D%0A%20var%20ac%3DparseInt(getInfo(tdiv).left)%3B%0D%0A%20var%20ad%3DparseInt(getInfo(tdiv).top)%3B%0D%0A%20var%20ae%3D(ac-getInfo(ao).left)%2Fab%3B%0D%0A%20var%20af%3D(ad-getInfo(ao).top)%2Fab%3B%0D%0A%20return%20setInterval(function()%7Bif(ab%3C1)%7B%0D%0A%20%20%20%20%20%20%20clearInterval(mm)%3B%0D%0A%20%20%20%20%20%20%20tdiv.removeNode(true)%3B%0D%0A%20%20%20%20%20%20%20ao%3Dnull%3B%0D%0A%20%20%20%20%20%20%20return%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20ab--%3B%0D%0A%20%20%20%20%20ac-%3Dae%3B%0D%0A%20%20%20%20%20ad-%3Daf%3B%0D%0A%20%20%20%20%20tdiv.style.left%3DparseInt(ac)%2B%22px%22%3B%0D%0A%20%20%20%20%20tdiv.style.top%3DparseInt(ad)%2B%22px%22%0D%0A%20%20%20%20%7D%0D%0A%2Caa%2Fab)%0D%0A%7D%0D%0Afunction%20inint()%7B%2F%2F%E5%88%9D%E5%A7%8B%E5%8C%96%0D%0A%20for(var%20i%3D0%3Bi%3CparentTable.cells.length%3Bi%2B%2B)%7B%0D%0A%20%20var%20subTables%3DparentTable.cells%5Bi%5D.getElementsByTagName(%22table%22)%3B%0D%0A%20%20for(var%20j%3D0%3Bj%3CsubTables.length%3Bj%2B%2B)%7B%0D%0A%20%20%20if(subTables%5Bj%5D.className!%3D%22dragTable%22)break%3B%0D%0A%20%20%20subTables%5Bj%5D.rows%5B0%5D.className%3D%22dragTR%22%3B%0D%0A%20%20%20subTables%5Bj%5D.rows%5B0%5D.attachEvent(%22onmousedown%22%2CdragStart)%3B%0D%0A%20%20%20subTables%5Bj%5D.attachEvent(%22ondrag%22%2Cdraging)%3B%0D%0A%20%20%20subTables%5Bj%5D.attachEvent(%22ondragend%22%2CdragEnd)%3B%0D%0A%20%20%7D%0D%0A%20%7D%0D%0A%7D%0D%0Ainint()%3B%0D%0A%3C%2Fscript%3E"> </head> <body> <table border="0" cellpadding="0" cellspacing="10" width="100%" height=500 id="parentTable"> <tr > <td width="25%" valgin="top"> <table border=0 class="dragTable" cellspacing="0"> <tr> <td><b>GMAIL</b></td> </tr> <tr> <td>暂时无法显示GMAIL内容</td> <tr> </table><table border=0 class="dragTable" cellspacing="0"> <tr> <td>新浪体育</td> </tr> <tr> <td>解剖威队独门利器FW28 2万转引擎匹配超级变速器颁奖：辛吉斯欣喜能以冠军起步 印度搭档创下纪录法新社前瞻冬奥短道速滑：中韩唱主角 美加施冷箭</td> <tr> </table><table border=0 class="dragTable" cellspacing="0"> <tr> <td>焦点</td> </tr> <tr> <td>京广线中断4小时20临客返汉晚点 中国新闻网-湖北分社 - 所有 235 相关报道 ?哈马斯已有总理人选 解放日报报业集团 - 所有 489 相关报道 ?陈水扁是两岸关系麻烦制造者 武汉晨报 - 所有 179 相关报道 ?</td> <tr> </table> </td> <td width="25%"> <table border=0 class="dragTable" cellspacing="0"> <tr> <td>中关村在线</td> </tr> <tr> <td>新年行情速递 双敏板卡低价推荐 终于等到了，映泰6600GT一降降一百 罗技G15游戏键盘热力促销，代购价仅529元 </td> <tr> </table></td> <td width="25%"> <table border=0 class="dragTable" cellspacing="0"> <tr> <td>网易商业</td> </tr> <tr> <td>上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市</td> <tr> </table> </td> </tr> </table> </body> </html></P>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
div版的
<P><img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22javascript%22%20type%3D%22text%2Fjavascript%22%3E%0D%0A%20%0D%0Avar%20Demos%20%20%20%20%20%20%20%3D%20%5B%5D%3B%0D%0Avar%20nDemos%20%20%20%20%20%20%3D%208%3B%3C%2FP%3E%0D%0A%3CP%3E%2F%2F%20Demo%20variables%0D%0A%2F%2F%20iMouseDown%20represents%20the%20current%20mouse%20button%20state%3A%20up%20or%20down%0D%0A%2F*%0D%0AlMouseState%20represents%20the%20previous%20mouse%20button%20state%20so%20that%20we%20can%0D%0Acheck%20for%20button%20clicks%20and%20button%20releases%3A%3C%2FP%3E%0D%0A%3CP%3Eif(iMouseDown%20%26%26%20!lMouseState)%20%2F%2F%20button%20just%20clicked!%0D%0Aif(!iMouseDown%20%26%26%20lMouseState)%20%2F%2F%20button%20just%20released!%0D%0A*%2F%0D%0Avar%20mouseOffset%20%3D%20null%3B%0D%0Avar%20iMouseDown%20%20%3D%20false%3B%0D%0Avar%20lMouseState%20%3D%20false%3B%0D%0Avar%20dragObject%20%20%3D%20null%3B%3C%2FP%3E%0D%0A%3CP%3E%2F%2F%20Demo%200%20variables%0D%0Avar%20DragDrops%20%20%20%3D%20%5B%5D%3B%0D%0Avar%20curTarget%20%20%20%3D%20null%3B%0D%0Avar%20lastTarget%20%20%3D%20null%3B%0D%0Avar%20dragHelper%20%20%3D%20null%3B%0D%0Avar%20tempDiv%20%20%20%20%20%3D%20null%3B%0D%0Avar%20rootParent%20%20%3D%20null%3B%0D%0Avar%20rootSibling%20%3D%20null%3B%0D%0Avar%20nImg%20%20%20%20%20%20%20%20%3D%20new%20Image()%3B%3C%2FP%3E%0D%0A%3CP%3EnImg.src%20%20%20%20%20%20%20%20%3D%20'images%2Fdrag_drop_poof.gif'%3B%3C%2FP%3E%0D%0A%3CP%3E%2F%2F%20Demo1%20variables%0D%0Avar%20D1Target%20%20%20%20%3D%20null%3B%3C%2FP%3E%0D%0A%3CP%3ENumber.prototype.NaN0%3Dfunction()%7Breturn%20isNaN(this)%3F0%3Athis%3B%7D%3C%2FP%3E%0D%0A%3CP%3Efunction%20CreateDragContainer()%7B%0D%0A%20%2F*%0D%0A%20Create%20a%20new%20%22Container%20Instance%22%20so%20that%20items%20from%20one%20%22Set%22%20can%20not%0D%0A%20be%20dragged%20into%20items%20from%20another%20%22Set%22%0D%0A%20*%2F%0D%0A%20var%20cDrag%20%20%20%20%20%20%20%20%3D%20DragDrops.length%3B%0D%0A%20DragDrops%5BcDrag%5D%20%3D%20%5B%5D%3B%3C%2FP%3E%0D%0A%3CP%3E%20%2F*%0D%0A%20Each%20item%20passed%20to%20this%20function%20should%20be%20a%20%22container%22.%20%20Store%20each%0D%0A%20of%20these%20items%20in%20our%20current%20container%0D%0A%20*%2F%0D%0A%20for(var%20i%3D0%3B%20i%3Carguments.length%3B%20i%2B%2B)%7B%0D%0A%20%20var%20cObj%20%3D%20arguments%5Bi%5D%3B%0D%0A%20%20DragDrops%5BcDrag%5D.push(cObj)%3B%0D%0A%20%20cObj.setAttribute('DropObj'%2C%20cDrag)%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20%2F*%0D%0A%20%20Every%20top%20level%20item%20in%20these%20containers%20should%20be%20draggable.%20%20Do%20this%0D%0A%20%20by%20setting%20the%20DragObj%20attribute%20on%20each%20item%20and%20then%20later%20checking%0D%0A%20%20this%20attribute%20in%20the%20mouseMove%20function%0D%0A%20%20*%2F%0D%0A%20%20for(var%20j%3D0%3B%20j%3CcObj.childNodes.length%3B%20j%2B%2B)%7B%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%2F%2F%20Firefox%20puts%20in%20lots%20of%20%23text%20nodes...skip%20these%0D%0A%20%20%20if(cObj.childNodes%5Bj%5D.nodeName%3D%3D'%23text')%20continue%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20%20cObj.childNodes%5Bj%5D.setAttribute('DragObj'%2C%20cDrag)%3B%0D%0A%20%20%7D%0D%0A%20%7D%0D%0A%7D%3C%2FP%3E%0D%0A%3CP%3Efunction%20getPosition(e)%7B%0D%0A%20var%20left%20%3D%200%3B%0D%0A%20var%20top%20%20%3D%200%3B%0D%0A%20while%20(e.offsetParent)%7B%0D%0A%20%20left%20%2B%3D%20e.offsetLeft%20%2B%20(e.currentStyle%3F(parseInt(e.currentStyle.borderLeftWidth)).NaN0()%3A0)%3B%0D%0A%20%20top%20%20%2B%3D%20e.offsetTop%20%20%2B%20(e.currentStyle%3F(parseInt(e.currentStyle.borderTopWidth)).NaN0()%3A0)%3B%0D%0A%20%20e%20%20%20%20%20%3D%20e.offsetParent%3B%0D%0A%20%7D%3C%2FP%3E%0D%0A%3CP%3E%0D%0A%20left%20%2B%3D%20e.offsetLeft%20%2B%20(e.currentStyle%3F(parseInt(e.currentStyle.borderLeftWidth)).NaN0()%3A0)%3B%0D%0A%20top%20%20%2B%3D%20e.offsetTop%20%20%2B%20(e.currentStyle%3F(parseInt(e.currentStyle.borderTopWidth)).NaN0()%3A0)%3B%3C%2FP%3E%0D%0A%3CP%3E%20return%20%7Bx%3Aleft%2C%20y%3Atop%7D%3B%3C%2FP%3E%0D%0A%3CP%3E%7D%3C%2FP%3E%0D%0A%3CP%3Efunction%20mouseCoords(ev)%7B%0D%0A%20if(ev.pageX%20%7C%7C%20ev.pageY)%7B%0D%0A%20%20return%20%7Bx%3Aev.pageX%2C%20y%3Aev.pageY%7D%3B%0D%0A%20%7D%0D%0A%20return%20%7B%0D%0A%20%20x%3Aev.clientX%20%2B%20document.body.scrollLeft%20-%20document.body.clientLeft%2C%0D%0A%20%20y%3Aev.clientY%20%2B%20document.body.scrollTop%20%20-%20document.body.clientTop%0D%0A%20%7D%3B%0D%0A%7D%3C%2FP%3E%0D%0A%3CP%3Efunction%20writeHistory(object%2C%20message)%7B%0D%0A%20if(!object%20%7C%7C%20!object.parentNode%20%7C%7C%20!object.parentNode.getAttribute)%20return%3B%0D%0A%20var%20historyDiv%20%3D%20object.parentNode.getAttribute('history')%3B%0D%0A%20if(historyDiv)%7B%0D%0A%20%20historyDiv%20%3D%20document.getElementById(historyDiv)%3B%0D%0A%20%20historyDiv.appendChild(document.createTextNode(object.id%2B'%3A%20'%2Bmessage))%3B%0D%0A%20%20historyDiv.appendChild(document.createElement('BR'))%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20historyDiv.scrollTop%20%2B%3D%2050%3B%0D%0A%20%7D%0D%0A%7D%3C%2FP%3E%0D%0A%3CP%3Efunction%20getMouseOffset(target%2C%20ev)%7B%0D%0A%20ev%20%3D%20ev%20%7C%7C%20window.event%3B%3C%2FP%3E%0D%0A%3CP%3E%20var%20docPos%20%20%20%20%3D%20getPosition(target)%3B%0D%0A%20var%20mousePos%20%20%3D%20mouseCoords(ev)%3B%0D%0A%20return%20%7Bx%3AmousePos.x%20-%20docPos.x%2C%20y%3AmousePos.y%20-%20docPos.y%7D%3B%0D%0A%7D%3C%2FP%3E%0D%0A%3CP%3Efunction%20mouseMove(ev)%7B%0D%0A%20ev%20%20%20%20%20%20%20%20%20%3D%20ev%20%7C%7C%20window.event%3B%3C%2FP%3E%0D%0A%3CP%3E%20%2F*%0D%0A%20We%20are%20setting%20target%20to%20whatever%20item%20the%20mouse%20is%20currently%20on%3C%2FP%3E%0D%0A%3CP%3E%20Firefox%20uses%20event.target%20here%2C%20MSIE%20uses%20event.srcElement%0D%0A%20*%2F%0D%0A%20var%20target%20%20%20%3D%20ev.target%20%7C%7C%20ev.srcElement%3B%0D%0A%20var%20mousePos%20%3D%20mouseCoords(ev)%3B%3C%2FP%3E%0D%0A%3CP%3E%20if(Demos%5B0%5D%20%7C%7C%20Demos%5B4%5D)%7B%0D%0A%20%20%2F%2F%20mouseOut%20event%20-%20fires%20if%20the%20item%20the%20mouse%20is%20on%20has%20changed%0D%0A%20%20if(lastTarget%20%26%26%20(target!%3D%3DlastTarget))%7B%0D%0A%20%20%20writeHistory(lastTarget%2C%20'Mouse%20Out%20Fired')%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%2F%2F%20reset%20the%20classname%20for%20the%20target%20element%0D%0A%20%20%20var%20origClass%20%3D%20lastTarget.getAttribute('origClass')%3B%0D%0A%20%20%20if(origClass)%20lastTarget.className%20%3D%20origClass%3B%0D%0A%20%20%7D%3C%2FP%3E%0D%0A%3CP%3E%20%20%2F*%0D%0A%20%20dragObj%20is%20the%20grouping%20our%20item%20is%20in%20(set%20from%20the%20createDragContainer%20function).%0D%0A%20%20if%20the%20item%20is%20not%20in%20a%20grouping%20we%20ignore%20it%20since%20it%20can't%20be%20dragged%20with%20this%0D%0A%20%20script.%0D%0A%20%20*%2F%0D%0A%20%20var%20dragObj%20%3D%20target.getAttribute('DragObj')%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%2F%2F%20if%20the%20mouse%20was%20moved%20over%20an%20element%20that%20is%20draggable%0D%0A%20%20if(dragObj!%3Dnull)%7B%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%2F%2F%20mouseOver%20event%20-%20Change%20the%20item's%20class%20if%20necessary%0D%0A%20%20%20if(target!%3DlastTarget)%7B%0D%0A%20%20%20%20writeHistory(target%2C%20'Mouse%20Over%20Fired')%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%20var%20oClass%20%3D%20target.getAttribute('overClass')%3B%0D%0A%20%20%20%20if(oClass)%7B%0D%0A%20%20%20%20%20target.setAttribute('origClass'%2C%20target.className)%3B%0D%0A%20%20%20%20%20target.className%20%3D%20oClass%3B%0D%0A%20%20%20%20%7D%0D%0A%20%20%20%7D%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%2F%2F%20if%20the%20user%20is%20just%20starting%20to%20drag%20the%20element%0D%0A%20%20%20if(iMouseDown%20%26%26%20!lMouseState)%7B%0D%0A%20%20%20%20writeHistory(target%2C%20'Start%20Dragging')%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%20%2F%2F%20mouseDown%20target%0D%0A%20%20%20%20curTarget%20%20%20%20%20%3D%20target%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%20%2F%2F%20Record%20the%20mouse%20x%20and%20y%20offset%20for%20the%20element%0D%0A%20%20%20%20rootParent%20%20%20%20%3D%20curTarget.parentNode%3B%0D%0A%20%20%20%20rootSibling%20%20%20%3D%20curTarget.nextSibling%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%20mouseOffset%20%20%20%3D%20getMouseOffset(target%2C%20ev)%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%20%2F%2F%20We%20remove%20anything%20that%20is%20in%20our%20dragHelper%20DIV%20so%20we%20can%20put%20a%20new%20item%20in%20it.%0D%0A%20%20%20%20for(var%20i%3D0%3B%20i%3CdragHelper.childNodes.length%3B%20i%2B%2B)%20dragHelper.removeChild(dragHelper.childNodes%5Bi%5D)%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%20%2F%2F%20Make%20a%20copy%20of%20the%20current%20item%20and%20put%20it%20in%20our%20drag%20helper.%0D%0A%20%20%20%20dragHelper.appendChild(curTarget.cloneNode(true))%3B%0D%0A%20%20%20%20dragHelper.style.display%20%3D%20'block'%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%20%2F%2F%20set%20the%20class%20on%20our%20helper%20DIV%20if%20necessary%0D%0A%20%20%20%20var%20dragClass%20%3D%20curTarget.getAttribute('dragClass')%3B%0D%0A%20%20%20%20if(dragClass)%7B%0D%0A%20%20%20%20%20dragHelper.firstChild.className%20%3D%20dragClass%3B%0D%0A%20%20%20%20%7D%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%20%2F%2F%20disable%20dragging%20from%20our%20helper%20DIV%20(it's%20already%20being%20dragged)%0D%0A%20%20%20%20dragHelper.firstChild.removeAttribute('DragObj')%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%20%2F*%0D%0A%20%20%20%20Record%20the%20current%20position%20of%20all%20drag%2Fdrop%20targets%20related%0D%0A%20%20%20%20to%20the%20element.%20%20We%20do%20this%20here%20so%20that%20we%20do%20not%20have%20to%20do%0D%0A%20%20%20%20it%20on%20the%20general%20mouse%20move%20event%20which%20fires%20when%20the%20mouse%0D%0A%20%20%20%20moves%20even%201%20pixel.%20%20If%20we%20don't%20do%20this%20here%20the%20script%0D%0A%20%20%20%20would%20run%20much%20slower.%0D%0A%20%20%20%20*%2F%0D%0A%20%20%20%20var%20dragConts%20%3D%20DragDrops%5BdragObj%5D%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%20%2F*%0D%0A%20%20%20%20first%20record%20the%20width%2Fheight%20of%20our%20drag%20item.%20%20Then%20hide%20it%20since%0D%0A%20%20%20%20it%20is%20going%20to%20(potentially)%20be%20moved%20out%20of%20its%20parent.%0D%0A%20%20%20%20*%2F%0D%0A%20%20%20%20curTarget.setAttribute('startWidth'%2C%20%20parseInt(curTarget.offsetWidth))%3B%0D%0A%20%20%20%20curTarget.setAttribute('startHeight'%2C%20parseInt(curTarget.offsetHeight))%3B%0D%0A%20%20%20%20curTarget.style.cssText%20%3D%20'FILTER%3Aalpha(opacity%3D20)%3Bborder%3A1px%20dotted%20%23ff0000'%3B%0D%0A%20%20%20%20%2F%2F%20loop%20through%20each%20possible%20drop%20container%0D%0A%20%20%20%20for(var%20i%3D0%3B%20i%3CdragConts.length%3B%20i%2B%2B)%7B%0D%0A%20%20%20%20%20with(dragConts%5Bi%5D)%7B%0D%0A%20%20%20%20%20%20var%20pos%20%3D%20getPosition(dragConts%5Bi%5D)%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%20%20%20%2F*%0D%0A%20%20%20%20%20%20save%20the%20width%2C%20height%20and%20position%20of%20each%20container.%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%20%20%20Even%20though%20we%20are%20saving%20the%20width%20and%20height%20of%20each%0D%0A%20%20%20%20%20%20container%20back%20to%20the%20container%20this%20is%20much%20faster%20because%0D%0A%20%20%20%20%20%20we%20are%20saving%20the%20number%20and%20do%20not%20have%20to%20run%20through%0D%0A%20%20%20%20%20%20any%20calculations%20again.%20%20Also%2C%20offsetHeight%20and%20offsetWidth%0D%0A%20%20%20%20%20%20are%20both%20fairly%20slow.%20%20You%20would%20never%20normally%20notice%20any%0D%0A%20%20%20%20%20%20performance%20hit%20from%20these%20two%20functions%20but%20our%20code%20is%0D%0A%20%20%20%20%20%20going%20to%20be%20running%20hundreds%20of%20times%20each%20second%20so%20every%0D%0A%20%20%20%20%20%20little%20bit%20helps!%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%20%20%20Note%20that%20the%20biggest%20performance%20gain%20here%2C%20by%20far%2C%20comes%0D%0A%20%20%20%20%20%20from%20not%20having%20to%20run%20through%20the%20getPosition%20function%0D%0A%20%20%20%20%20%20hundreds%20of%20times.%0D%0A%20%20%20%20%20%20*%2F%0D%0A%20%20%20%20%20%20setAttribute('startWidth'%2C%20%20parseInt(offsetWidth))%3B%0D%0A%20%20%20%20%20%20setAttribute('startHeight'%2C%20parseInt(offsetHeight))%3B%0D%0A%20%20%20%20%20%20setAttribute('startLeft'%2C%20%20%20pos.x)%3B%0D%0A%20%20%20%20%20%20setAttribute('startTop'%2C%20%20%20%20pos.y)%3B%0D%0A%20%20%20%20%20%7D%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%20%20%2F%2F%20loop%20through%20each%20child%20element%20of%20each%20container%0D%0A%20%20%20%20%20for(var%20j%3D0%3B%20j%3CdragConts%5Bi%5D.childNodes.length%3B%20j%2B%2B)%7B%0D%0A%20%20%20%20%20%20with(dragConts%5Bi%5D.childNodes%5Bj%5D)%7B%0D%0A%20%20%20%20%20%20%20if((nodeName%3D%3D'%23text')%20%7C%7C%20(dragConts%5Bi%5D.childNodes%5Bj%5D%3D%3DcurTarget))%20continue%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%20%20%20%20var%20pos%20%3D%20getPosition(dragConts%5Bi%5D.childNodes%5Bj%5D)%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%20%20%20%20%2F%2F%20save%20the%20width%2C%20height%20and%20position%20of%20each%20element%0D%0A%20%20%20%20%20%20%20setAttribute('startWidth'%2C%20%20parseInt(offsetWidth))%3B%0D%0A%20%20%20%20%20%20%20setAttribute('startHeight'%2C%20parseInt(offsetHeight))%3B%0D%0A%20%20%20%20%20%20%20setAttribute('startLeft'%2C%20%20%20pos.x)%3B%0D%0A%20%20%20%20%20%20%20setAttribute('startTop'%2C%20%20%20%20pos.y)%3B%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%0D%0A%20%20%20%7D%0D%0A%20%20%7D%0D%0A%20%20%2F%2F%20If%20we%20get%20in%20here%20we%20are%20dragging%20something%0D%0A%20%20if(curTarget)%7B%0D%0A%20%20%20%2F%2F%20move%20our%20helper%20div%20to%20wherever%20the%20mouse%20is%20(adjusted%20by%20mouseOffset)%0D%0A%20%20%20dragHelper.style.top%20%20%3D%20mousePos.y%20-%20mouseOffset.y%3B%0D%0A%20%20%20dragHelper.style.left%20%3D%20mousePos.x%20-%20mouseOffset.x%3B%0D%0A%20%20%20var%20dragConts%20%20%3D%20DragDrops%5BcurTarget.getAttribute('DragObj')%5D%3B%0D%0A%20%20%20var%20activeCont%20%3D%20null%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20%20var%20xPos%20%3D%20mousePos.x%20-%20mouseOffset.x%20%2B%20(parseInt(curTarget.getAttribute('startWidth'))%20%2F2)%3B%0D%0A%20%20%20var%20yPos%20%3D%20mousePos.y%20-%20mouseOffset.y%20%2B%20(parseInt(curTarget.getAttribute('startHeight'))%2F2)%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%2F%2F%20check%20each%20drop%20container%20to%20see%20if%20our%20target%20object%20is%20%22inside%22%20the%20container%0D%0A%20%20%20for(var%20i%3D0%3B%20i%3CdragConts.length%3B%20i%2B%2B)%7B%0D%0A%20%20%20%20with(dragConts%5Bi%5D)%7B%0D%0A%20%20%20%20%20if((parseInt(getAttribute('startLeft'))%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%20xPos)%20%26%26%0D%0A%20%20%20%20%20%20(parseInt(getAttribute('startTop'))%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%20yPos)%20%26%26%0D%0A%20%20%20%20%20%20((parseInt(getAttribute('startLeft'))%20%2B%20parseInt(getAttribute('startWidth')))%20%20%3E%20xPos)%20%26%26%0D%0A%20%20%20%20%20%20((parseInt(getAttribute('startTop'))%20%20%2B%20parseInt(getAttribute('startHeight')))%20%3E%20yPos))%7B%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%20%20%20%20%2F*%0D%0A%20%20%20%20%20%20%20our%20target%20is%20inside%20of%20our%20container%20so%20save%20the%20container%20into%0D%0A%20%20%20%20%20%20%20the%20activeCont%20variable%20and%20then%20exit%20the%20loop%20since%20we%20no%20longer%0D%0A%20%20%20%20%20%20%20need%20to%20check%20the%20rest%20of%20the%20containers%0D%0A%20%20%20%20%20%20%20*%2F%0D%0A%20%20%20%20%20%20%20activeCont%20%3D%20dragConts%5Bi%5D%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%20%20%20%20%2F%2F%20exit%20the%20for%20loop%0D%0A%20%20%20%20%20%20%20break%3B%0D%0A%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%0D%0A%20%20%20%7D%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%2F%2F%20Our%20target%20object%20is%20in%20one%20of%20our%20containers.%20%20Check%20to%20see%20where%20our%20div%20belongs%0D%0A%20%20%20if(activeCont)%7B%0D%0A%20%20%20%20if(activeCont!%3DcurTarget.parentNode)%7B%0D%0A%20%20%20%20%20writeHistory(curTarget%2C%20'Moved%20into%20'%2BactiveCont.id)%3B%0D%0A%20%20%20%20%7D%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%20%2F%2F%20beforeNode%20will%20hold%20the%20first%20node%20AFTER%20where%20our%20div%20belongs%0D%0A%20%20%20%20var%20beforeNode%20%3D%20null%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%20%2F%2F%20loop%20through%20each%20child%20node%20(skipping%20text%20nodes).%0D%0A%20%20%20%20for(var%20i%3DactiveCont.childNodes.length-1%3B%20i%3E%3D0%3B%20i--)%7B%0D%0A%20%20%20%20%20with(activeCont.childNodes%5Bi%5D)%7B%0D%0A%20%20%20%20%20%20if(nodeName%3D%3D'%23text')%20continue%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%20%20%20%2F%2F%20if%20the%20current%20item%20is%20%22After%22%20the%20item%20being%20dragged%0D%0A%20%20%20%20%20%20if(curTarget%20!%3D%20activeCont.childNodes%5Bi%5D%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%26%26%0D%0A%20%20%20%20%20%20%20((parseInt(getAttribute('startLeft'))%20%2B%20parseInt(getAttribute('startWidth')))%20%20%3E%20xPos)%20%26%26%0D%0A%20%20%20%20%20%20%20((parseInt(getAttribute('startTop'))%20%20%2B%20parseInt(getAttribute('startHeight')))%20%3E%20yPos))%7B%0D%0A%20%20%20%20%20%20%20%20beforeNode%20%3D%20activeCont.childNodes%5Bi%5D%3B%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%20%2F%2F%20the%20item%20being%20dragged%20belongs%20before%20another%20item%0D%0A%20%20%20%20if(beforeNode)%7B%0D%0A%20%20%20%20%20if(beforeNode!%3DcurTarget.nextSibling)%7B%0D%0A%20%20%20%20%20%20writeHistory(curTarget%2C%20'Inserted%20Before%20'%2BbeforeNode.id)%3B%0D%0A%20%20%20%20%20%20activeCont.insertBefore(curTarget%2C%20beforeNode)%3B%0D%0A%20%20%20%20%20%7D%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%20%2F%2F%20the%20item%20being%20dragged%20belongs%20at%20the%20end%20of%20the%20current%20container%0D%0A%20%20%20%20%7D%20else%20%7B%0D%0A%20%20%20%20%20if((curTarget.nextSibling)%20%7C%7C%20(curTarget.parentNode!%3DactiveCont))%7B%0D%0A%20%20%20%20%20%20writeHistory(curTarget%2C%20'Inserted%20at%20end%20of%20'%2BactiveCont.id)%3B%0D%0A%20%20%20%20%20%20activeCont.appendChild(curTarget)%3B%0D%0A%20%20%20%20%20%7D%0D%0A%20%20%20%20%7D%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%20%2F%2F%20the%20timeout%20is%20here%20because%20the%20container%20doesn't%20%22immediately%22%20resize%0D%0A%20%20%20setTimeout(function()%7B%0D%0A%20%20%20%20var%20contPos%20%3D%20getPosition(activeCont)%3B%0D%0A%20%20%20%20activeCont.setAttribute('startWidth'%2C%20%20parseInt(activeCont.offsetWidth))%3B%0D%0A%20%20%20%20activeCont.setAttribute('startHeight'%2C%20parseInt(activeCont.offsetHeight))%3B%0D%0A%20%20%20%20activeCont.setAttribute('startLeft'%2C%20%20%20contPos.x)%3B%0D%0A%20%20%20%20activeCont.setAttribute('startTop'%2C%20%20%20%20contPos.y)%3B%7D%2C%205)%3B%0D%0A%20%20%20%20%2F%2F%20make%20our%20drag%20item%20visible%0D%0A%20%20%20%20if(curTarget.style.display!%3D'')%7B%0D%0A%20%20%20%20%20writeHistory(curTarget%2C%20'Made%20Visible')%3B%0D%0A%20%20%20%20%20curTarget.style.display%20%20%20%20%3D%20''%3B%0D%0A%20%20%20%20%20curTarget.style.visibility%20%3D%20'visible'%3B%0D%0A%20%20%20%20%7D%0D%0A%20%20%20%7D%20else%20%7B%3C%2FP%3E%0D%0A%3CP%3E%20%20%20%20%2F%2F%20our%20drag%20item%20is%20not%20in%20a%20container%2C%20so%20hide%20it.%0D%0A%20%20%20%20if(curTarget.style.display!%3D'none')%7B%0D%0A%20%20%20%20%20writeHistory(curTarget%2C%20'Hidden')%3B%0D%0A%20%20%20%20%20curTarget.style.display%20%20%3D%20'none'%3B%0D%0A%20%20%20%20%7D%0D%0A%20%20%20%7D%0D%0A%20%20%7D%3C%2FP%3E%0D%0A%3CP%3E%20%20%2F%2F%20track%20the%20current%20mouse%20state%20so%20we%20can%20compare%20against%20it%20next%20time%0D%0A%20%20lMouseState%20%3D%20iMouseDown%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20%2F%2F%20mouseMove%20target%0D%0A%20%20lastTarget%20%20%3D%20target%3B%0D%0A%20%7D%0D%0A%20if(Demos%5B2%5D)%7B%0D%0A%20%20document.getElementById('MouseXPosition').value%20%3D%20mousePos.x%3B%0D%0A%20%20document.getElementById('MouseYPosition').value%20%3D%20mousePos.y%3B%0D%0A%20%7D%3C%2FP%3E%0D%0A%3CP%3E%20if(dragObject)%7B%0D%0A%20%20dragObject.style.position%20%3D%20'absolute'%3B%0D%0A%20%20dragObject.style.top%20%20%20%20%20%20%3D%20mousePos.y%20-%20mouseOffset.y%3B%0D%0A%20%20dragObject.style.left%20%20%20%20%20%3D%20mousePos.x%20-%20mouseOffset.x%3B%0D%0A%20%7D%3C%2FP%3E%0D%0A%3CP%3E%20%2F%2F%20track%20the%20current%20mouse%20state%20so%20we%20can%20compare%20against%20it%20next%20time%0D%0A%20lMouseState%20%3D%20iMouseDown%3B%3C%2FP%3E%0D%0A%3CP%3E%20%2F%2F%20this%20prevents%20items%20on%20the%20page%20from%20being%20highlighted%20while%20dragging%0D%0A%20if(curTarget%20%7C%7C%20dragObject)%20return%20false%3B%0D%0A%7D%3C%2FP%3E%0D%0A%3CP%3Efunction%20mouseUp(ev)%7B%3C%2FP%3E%0D%0A%3CP%3E%20if(Demos%5B0%5D%20%7C%7C%20Demos%5B4%5D)%7B%0D%0A%20%20if(curTarget)%7B%0D%0A%20%20%20writeHistory(curTarget%2C%20'Mouse%20Up%20Fired')%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20%20dragHelper.style.display%20%3D%20'none'%3B%0D%0A%20%20%20if(curTarget.style.display%20%3D%3D%20'none')%7B%0D%0A%20%20%20%20if(rootSibling)%7B%0D%0A%20%20%20%20%20rootParent.insertBefore(curTarget%2C%20rootSibling)%3B%0D%0A%20%20%20%20%7D%20else%20%7B%0D%0A%20%20%20%20%20rootParent.appendChild(curTarget)%3B%0D%0A%20%20%20%20%7D%0D%0A%20%20%20%7D%0D%0A%20%20%20curTarget.style.display%20%20%20%20%3D%20''%3B%0D%0A%20%20%20curTarget.style.visibility%20%3D%20'visible'%3B%0D%0A%20%20%20curTarget.style.cssText%20%3D%20'FILTER%3Aalpha(opacity%3D100)%3Bborder%3A1px%20solid%20%23000'%3B%0D%0A%20%20%7D%0D%0A%20%20curTarget%20%20%3D%20null%3B%0D%0A%20%7D%0D%0A%20if(Demos%5B6%5D%20%26%26%20dragObject)%7B%0D%0A%20%20ev%20%20%20%20%20%20%20%20%20%20%20%3D%20ev%20%7C%7C%20window.event%3B%0D%0A%20%20var%20mousePos%20%3D%20mouseCoords(ev)%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20var%20dT%20%3D%20dragObject.getAttribute('droptarget')%3B%0D%0A%20%20if(dT)%7B%0D%0A%20%20%20var%20targObj%20%3D%20document.getElementById(dT)%3B%0D%0A%20%20%20var%20objPos%20%20%3D%20getPosition(targObj)%3B%0D%0A%20%20%20if((mousePos.x%20%3E%20objPos.x)%20%26%26%20(mousePos.y%20%3E%20objPos.y)%20%26%26%20(mousePos.x%3C(objPos.x%2BparseInt(targObj.offsetWidth)))%20%26%26%20(mousePos.y%3C(objPos.y%2BparseInt(targObj.offsetHeight))))%7B%0D%0A%20%20%20%20var%20nSrc%20%3D%20targObj.getAttribute('newSrc')%3B%0D%0A%20%20%20%20if(nSrc)%7B%0D%0A%20%20%20%20%20dragObject.src%20%3D%20nSrc%3B%0D%0A%20%20%20%20%20setTimeout(function()%7B%0D%0A%20%20%20%20%20%20if(!dragObject%20%7C%7C%20!dragObject.parentNode)%20return%3B%0D%0A%20%20%20%20%20%20dragObject.parentNode.removeChild(dragObject)%3B%0D%0A%20%20%20%20%20%20dragObject%20%3D%20null%3B%0D%0A%20%20%20%20%20%7D%2C%20parseInt(targObj.getAttribute('timeout')))%3B%0D%0A%20%20%20%20%7D%20else%20%7B%0D%0A%20%20%20%20%20dragObject.parentNode.removeChild(dragObject)%3B%0D%0A%20%20%20%20%7D%0D%0A%20%20%20%7D%0D%0A%20%20%7D%0D%0A%20%7D%3C%2FP%3E%0D%0A%3CP%3E%20dragObject%20%3D%20null%3B%3C%2FP%3E%0D%0A%3CP%3E%20iMouseDown%20%3D%20false%3B%0D%0A%7D%3C%2FP%3E%0D%0A%3CP%3Efunction%20mouseDown(ev)%7B%0D%0A%20ev%20%20%20%20%20%20%20%20%20%3D%20ev%20%7C%7C%20window.event%3B%0D%0A%20var%20target%20%3D%20ev.target%20%7C%7C%20ev.srcElement%3B%3C%2FP%3E%0D%0A%3CP%3E%20iMouseDown%20%3D%20true%3B%0D%0A%20if(Demos%5B0%5D%20%7C%7C%20Demos%5B4%5D)%7B%0D%0A%20%20if(lastTarget)%7B%0D%0A%20%20%20writeHistory(lastTarget%2C%20'Mouse%20Down%20Fired')%3B%0D%0A%20%20%7D%0D%0A%20%7D%0D%0A%20if(target.onmousedown%20%7C%7C%20target.getAttribute('DragObj'))%7B%0D%0A%20%20return%20false%3B%0D%0A%20%7D%0D%0A%7D%3C%2FP%3E%0D%0A%3CP%3Efunction%20makeDraggable(item)%7B%0D%0A%20if(!item)%20return%3B%0D%0A%20item.onmousedown%20%3D%20function(ev)%7B%0D%0A%20%20dragObject%20%20%3D%20this%3B%0D%0A%20%20mouseOffset%20%3D%20getMouseOffset(this%2C%20ev)%3B%0D%0A%20%20return%20false%3B%0D%0A%20%7D%0D%0A%7D%3C%2FP%3E%0D%0A%3CP%3Efunction%20makeClickable(item)%7B%0D%0A%20if(!item)%20return%3B%0D%0A%20item.onmousedown%20%3D%20function(ev)%7B%0D%0A%20%20document.getElementById('ClickImage').value%20%3D%20this.name%3B%0D%0A%20%7D%0D%0A%7D%3C%2FP%3E%0D%0A%3CP%3Efunction%20addDropTarget(item%2C%20target)%7B%0D%0A%20item.setAttribute('droptarget'%2C%20target)%3B%0D%0A%7D%3C%2FP%3E%0D%0A%3CP%3Edocument.onmousemove%20%3D%20mouseMove%3B%0D%0Adocument.onmousedown%20%3D%20mouseDown%3B%0D%0Adocument.onmouseup%20%20%20%3D%20mouseUp%3B%3C%2FP%3E%0D%0A%3CP%3Ewindow.onload%20%3D%20function()%7B%0D%0A%20for(var%20i%3D0%3B%20i%3CnDemos%3B%20i%2B%2B)%7B%0D%0A%20%20Demos%5Bi%5D%20%3D%20document.getElementById('Demo'%2Bi)%3B%0D%0A%20%7D%3C%2FP%3E%0D%0A%3CP%3E%20if(Demos%5B0%5D)%7B%0D%0A%20%20CreateDragContainer(document.getElementById('DragContainer1')%2C%20document.getElementById('DragContainer2')%2C%20document.getElementById('DragContainer3'))%3B%0D%0A%20%20CreateDragContainer(document.getElementById('DragContainer7'))%3B%0D%0A%20%20CreateDragContainer(document.getElementById('DragContainer8'))%3B%0D%0A%20%7D%0D%0A%20if(Demos%5B4%5D)%7B%0D%0A%20%20CreateDragContainer(document.getElementById('DragContainer1')%2C%20document.getElementById('DragContainer2'))%3B%0D%0A%20%7D%0D%0A%20if(Demos%5B0%5D%20%7C%7C%20Demos%5B4%5D)%7B%0D%0A%20%20%2F%2F%20Create%20our%20helper%20object%20that%20will%20show%20the%20item%20while%20dragging%0D%0A%20%20dragHelper%20%3D%20document.createElement('DIV')%3B%0D%0A%20%20dragHelper.style.cssText%20%3D%20'position%3Aabsolute%3Bdisplay%3Anone%3B'%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20document.body.appendChild(dragHelper)%3B%0D%0A%20%7D%0D%0A%20if(Demos%5B1%5D)%7B%0D%0A%20%20makeDraggable(document.getElementById('DragImage1'))%3B%0D%0A%20%20makeDraggable(document.getElementById('DragImage2'))%3B%0D%0A%20%20makeDraggable(document.getElementById('DragImage3'))%3B%0D%0A%20%20makeDraggable(document.getElementById('DragImage4'))%3B%0D%0A%20%7D%0D%0A%20if(Demos%5B5%5D)%7B%0D%0A%20%20makeDraggable(document.getElementById('DragImage5'))%3B%0D%0A%20%20makeDraggable(document.getElementById('DragImage6'))%3B%0D%0A%20%20makeDraggable(document.getElementById('DragImage7'))%3B%0D%0A%20%20makeDraggable(document.getElementById('DragImage8'))%3B%0D%0A%20%7D%0D%0A%20if(Demos%5B6%5D)%7B%0D%0A%20%20makeDraggable(document.getElementById('DragImage9'))%3B%0D%0A%20%20makeDraggable(document.getElementById('DragImage10'))%3B%0D%0A%20%20makeDraggable(document.getElementById('DragImage11'))%3B%0D%0A%20%20makeDraggable(document.getElementById('DragImage12'))%3B%3C%2FP%3E%0D%0A%3CP%3E%20%20addDropTarget(document.getElementById('DragImage9')%2C%20%20'TrashImage1')%3B%0D%0A%20%20addDropTarget(document.getElementById('DragImage10')%2C%20'TrashImage1')%3B%0D%0A%20%20addDropTarget(document.getElementById('DragImage11')%2C%20'TrashImage1')%3B%0D%0A%20%20addDropTarget(document.getElementById('DragImage12')%2C%20'TrashImage1')%3B%0D%0A%20%7D%0D%0A%20if(Demos%5B3%5D)%7B%0D%0A%20%20makeClickable(document.getElementById('ClickImage1'))%3B%0D%0A%20%20makeClickable(document.getElementById('ClickImage2'))%3B%0D%0A%20%20makeClickable(document.getElementById('ClickImage3'))%3B%0D%0A%20%20makeClickable(document.getElementById('ClickImage4'))%3B%0D%0A%20%7D%0D%0A%7D%0D%0A%3C%2Fscript%3E"></P> <P><style> #Demo4{margin-left:14px;} .DragContainer {float:left;width:360px;margin:5px;padding:5px;} .OverDragContainer {border:#ccc 2px solid;} .DragBox {border:#000 1px solid;width:350px;height:auto;background:#eee url(../images/right_title.gif) no-repeat left top;margin-bottom:5px;padding-top:5px;} .OverDragBox {border: #000 1px solid;width:350px;cursor:move;background:#eee url(../images/right_title.gif) no-repeat left top;;margin-bottom:5px;padding-top:5px;} .DragDragBox {border: #000 1px solid;width:350px;cursor:move;background:#eee url(../images/right_title.gif) no-repeat left top;;margin-bottom:5px;padding-top:5px;} .DragDragBox {FILTER:alpha(opacity=70);background:#eee url(../images/right_title.gif) no-repeat left top;} .DragBox img{margin-left:10px;} .DragDragBox img{margin-left:10px;} .OverDragBox img{margin-left:10px;} egend {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} .content{padding-left:8px;clear:both;height:25px;background:#fff;margin-top:5px;} .content li{list-style:none;width:75px;line-height:25px;float:left;} .history{background:#eee;} </style></P> <P><fieldset id="Demo4"><legend>本页面元素可以随意拖拽</legend> <div> <div class="DragContainer" id="DragContainer1" overclass="OverDragContainer"> <div class="DragBox" overclass="OverDragBox" dragclass="DragDragBox"> 顶级站点 <div class="content" id="hot_content"> <li><a href="http://www.sohu.com/" _ewebeditor_ta_href="http%3A%2F%2Fwww.sohu.com%2F" target="_blank">搜狐</a></li> <li><a href="http://www.sina.com.cn/" _ewebeditor_ta_href="http%3A%2F%2Fwww.sina.com.cn%2F" target="_blank">新浪</a></li> <li><a href="http://www.163.com/" _ewebeditor_ta_href="http%3A%2F%2Fwww.163.com%2F" target="_blank">网易</a></li> <li><a href="http://www.qq.com/" _ewebeditor_ta_href="http%3A%2F%2Fwww.qq.com%2F" target="_blank">腾讯QQ</a></li> <li><a href="http://www.tom.com/" _ewebeditor_ta_href="http%3A%2F%2Fwww.tom.com%2F" target="_blank">TOM</a></li> <li><a href="http://www.china.com/" _ewebeditor_ta_href="http%3A%2F%2Fwww.china.com%2F" target="_blank">中华网</a></li> <li><a href="http://www.21cn.com/" _ewebeditor_ta_href="http%3A%2F%2Fwww.21cn.com%2F" target="_blank">21CN</a></li> <li><a href="http://www.sogou.com/" _ewebeditor_ta_href="http%3A%2F%2Fwww.sogou.com%2F" target="_blank">搜狗</a></li> <li><a href="http://www.google.com/intl/zh-CN/" _ewebeditor_ta_href="http%3A%2F%2Fwww.google.com%2Fintl%2Fzh-CN%2F" target="_blank">Google</a></li> <li><a href="http://www.baidu.com/" _ewebeditor_ta_href="http%3A%2F%2Fwww.baidu.com%2F" target="_blank">百度</a></li> <li><a href="http://www.yahoo.com.cn/" _ewebeditor_ta_href="http%3A%2F%2Fwww.yahoo.com.cn%2F" target="_blank">雅虎</a></li> <li><a href="http://www.msn.com.cn/" _ewebeditor_ta_href="http%3A%2F%2Fwww.msn.com.cn%2F" target="_blank">MSN中国</a></li> </div> </div> <div class="DragBox" id="Item2" overclass="OverDragBox" dragclass="DragDragBox">Item #2 <p>欢迎您来到<a href="http://www.achome.cn" _ewebeditor_ta_href="http%3A%2F%2Fwww.achome.cn">www.achome.cn</a>,以后要常来噢</p></div> <div class=DragBox id=Item3 overclass="OverDragBox" dragclass="DragDragBox">Item #3</div> <div class=DragBox id=Item4 overclass="OverDragBox" dragclass="DragDragBox">Item #4</div> </div> <div class="DragContainer" id="DragContainer2" overclass="OverDragContainer"> <div class="DragBox" id=Item5 overclass="OverDragBox" dragclass="DragDragBox">Item #5</div> <div class="DragBox" id=Item6 overclass="OverDragBox" dragclass="DragDragBox">Item #6</div> </div> </div> </fieldset> </P>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程