Javascript Drag&Drop 小例子
2012-10-08 13:54
309 查看
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> <head> <title> 代码实例:拖动对象 Drag Object (兼容:IE、Firefox、Opera ... )</title> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <meta name="keywords" content="代码实例:拖动对象"> <meta name="description" content="最简短的拖动对象代码实例演示"> <style> .dragAble {position:relative;cursor:move;} </style> <script language="javascript"> <!-- var ie=document.all; var nn6=document.getElementById&&!document.all; var isdrag=false; var y,x; var oDragObj; function moveMouse(e) { if (isdrag) { oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px"; oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px"; return false; } } function initDrag(e) { var oDragHandle = nn6 ? e.target : event.srcElement; var topElement = "HTML"; while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") { oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement; } if (oDragHandle.className=="dragAble") { isdrag = true; oDragObj = oDragHandle; nTY = parseInt(oDragObj.style.top+0); y = nn6 ? e.clientY : event.clientY; nTX = parseInt(oDragObj.style.left+0); x = nn6 ? e.clientX : event.clientX; document.onmousemove=moveMouse; return false; } } document.onmousedown=initDrag; document.onmouseup=new Function("isdrag=false"); //--> </script> </head> <body> <div style="border:1px solid #ff6d00;background:#ffd801;width:240px;padding:5px 0;" class="dragAble">这些都是可拖动对象</div> <br> <div class="dragAble">我也可以动吗?</div> </body> </html>
from: http://blog.csdn.net/xyk0830/archive/2007/11/07/1871712.aspx
相关文章推荐
- 《JavaScript 实战》:实现拖放(Drag & Drop)效果
- javascript中实现拖拽drag & drop效果的几种方法
- JavaScript: DHTML API,Drag & Drop for Images and Layers
- Draggabilly – 轻松实现拖放功能(Drag & Drop)
- Drag &amp; Drop - From List to VideoDisplay
- Windows中Drag&Drop初探(一)
- 第三部分:实现IDataObject(OLE drag&drop之旅)
- Drag & Drop 全解析 (一)
- Drag & Drop (三)
- ASP.NET AJAX Drag And Drop
- Drag & Drop
- MFC Drag & Drop
- web拖动Drag&Drop原理
- Windows中Drag&Drop初探(二)
- CSharp Tips:Drag & Drop的高级应用
- ASP.NET AJAX (Atlas) 拖放(Drag & Drop)功能6种实现方法总结
- Window下拖放操作Drag & Drop 全解析
- Windows中Drag&Drop初探(二)
- custom event and dragdrop solution in javascript
- Drag and drop with Javascript