资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
javascript简单拖拽实现代码(鼠标事件 mousedown mousemove mouseup)
mousedown 的时候创建拖动对象，mouseup的时候释放对象，原理弄清楚了其实很简单。
简单拖拽实现代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简单拖拽实现</title> <style type="text/css"> *{margin:0;padding:0;} #box{ margin:20px auto; position:relative; width:400px; height:400px; background:#ccc; border:1px solid #333; postion:relative; } #dragBox{ width:50px; height:50px; text-align:center; line-height: 50px;position: absolute; background:blue; cursor:move; font-size:12px; color:#fff;} </style> </head> <body> <div id="box"> <div id="dragBox">拖我</div> </div> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Avar%20VVG%20%3D%20%7B%7D%3B%20%2F%2F%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4%20%0D%0AVVG.DOM%20%3D%20%7B%20%0D%0A%24%3A%20function(id)%20%7B%20%2F%2F%E5%88%9B%E5%BB%BA%E6%96%B9%E4%BE%BF%E7%9A%84%E9%80%89%E6%8B%A9%E7%AC%A6%20%0D%0Areturn%20typeof%20id%20%3D%3D%20%22string%22%20%3F%20document.getElementById(id)%20%3A%20id%3B%20%0D%0A%7D%2C%20%0D%0AbindEvent%3A%20function(node%2C%20type%2C%20func)%20%7B%20%2F%2F%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A%E6%96%B9%E6%B3%95%20%0D%0Aif%20(node.addEventListener)%20%7B%20%0D%0Anode.addEventListener(type%2C%20func%2C%20false)%3B%20%0D%0A%7D%20else%20if%20(node.attachEvent)%20%7B%20%0D%0Anode.attachEvent(%22on%22%20%2B%20type%2C%20func)%3B%20%0D%0A%7D%20else%20%7B%20%0D%0Anode%5B%22on%22%20%2B%20type%5D%20%3D%20func%3B%20%0D%0A%7D%20%0D%0A%7D%2C%20%0D%0AgetEvent%3A%20function(event)%20%7B%20%2F%2F%E8%8E%B7%E5%8F%96%E4%BA%8B%E4%BB%B6%20%0D%0Areturn%20event%20%3F%20event%20%3A%20window.event%3B%20%0D%0A%7D%2C%20%0D%0AgetTarget%3A%20function(event)%20%7B%20%2F%2F%E8%8E%B7%E5%8F%96%E4%BA%8B%E4%BB%B6%E7%9B%AE%E6%A0%87%20%0D%0Areturn%20event.target%20%7C%7C%20event.srcElement%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Avar%20DragDrop%20%3D%20function()%20%7B%20%2F%2F%E6%96%B0%E5%BB%BA%E4%B8%80%E4%B8%AA%E8%BF%94%E5%9B%9E%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%87%BD%E6%95%B0%20%0D%0Avar%20box%20%3D%20VVG.DOM.%24(%22box%22)%3B%20%2F%2F%E8%8E%B7%E5%8F%96%E5%A4%96%E5%9B%B4BOX%20%0D%0Avar%20dragBox%20%3D%20VVG.DOM.%24(%22dragBox%22)%3B%2F%2F%E8%8E%B7%E5%8F%96%E9%9C%80%E8%A6%81%E6%8B%96%E5%8A%A8%E7%9A%84BOX%20%0D%0Avar%20dragging%20%3D%20null%3B%20%2F%2F%E5%88%9D%E5%A7%8B%E5%8C%96%E5%AF%B9%E8%B1%A1%20%0D%0Afunction%20drag(event)%20%7B%20%2F%2F%E4%BA%8B%E4%BB%B6%E6%89%A7%E8%A1%8C%E5%87%BD%E6%95%B0%20%0D%0Aevent%20%3D%20VVG.DOM.getEvent(event)%3B%20%0D%0Avar%20target%20%3D%20VVG.DOM.getTarget(event)%3B%20%0D%0Aswitch%20(event.type)%20%7B%2F%2F%E5%88%A4%E6%96%AD%E4%BA%8B%E4%BB%B6%E7%B1%BB%E5%9E%8B%20%0D%0Acase%20%22mousedown%22%3A%20%0D%0Aif(target.id%20%3D%3D%20%22dragBox%22)%7B%20%2F%2F%E5%BD%93%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1%E7%9A%84ID%E7%AD%89%E4%BA%8E%E8%A6%81%E6%8B%96%E5%8A%A8%E7%9A%84BOX%E7%9A%84ID%E6%97%B6%20%0D%0Adragging%20%3D%20target%3B%20%2F%2F%E8%B5%8B%E5%80%BC%E5%88%B0%E6%8B%96%E5%8A%A8%E7%9B%AE%E6%A0%87%20%0D%0A%7D%20%0D%0Abreak%3B%20%0D%0Acase%20%22mousemove%22%3A%20%0D%0Aif(dragging)%7B%20%2F%2F%E5%BD%93%E6%9C%89%E6%8B%96%E5%8A%A8%E7%9B%AE%E6%A0%87%E6%97%B6%E6%89%A7%E8%A1%8C%20%0D%0AsTop%20%3D%20document.documentElement.scrollTop%20%7C%7C%20document.body.scrollTop%3B%20%2F%2F%E5%BD%93%E6%9C%89%E6%BB%9A%E5%8A%A8%E6%9D%A1%E7%9A%84%E6%97%B6%E5%80%99%E5%8D%B7%E5%8E%BB%E9%A1%B5%E9%9D%A2%E7%9A%84%E9%AB%98%E5%BA%A6%20%0D%0Adragging.style.left%20%3D%20(event.clientX%20-%20box.offsetLeft%20-%20dragBox.offsetWidth%2F2)%20%2B%20%22px%22%3B%20%0D%0Adragging.style.top%20%3D%20(event.clientY%20%2B%20sTop%20-%20box.offsetTop%20-%20dragBox.offsetHeight%2F2%20)%20%2B%20%22px%22%3B%20%0D%0Avar%20left%20%3D%20parseInt(dragging.style.left)%3B%20%0D%0Avar%20top%20%3D%20parseInt(dragging.style.top)%3B%20%0D%0A%2F%2Fconsole.log(%22left%3A%22%2Bleft%2B%22-----top%3A%22%2Btop%20%2B%20%22-------sTop%3A%22%2BsTop)%3B%20%0D%0A%2F%2F%20%E6%AF%94%E8%BE%83%E5%9D%90%E6%A0%87%E6%98%AF%E5%90%A6%E8%B6%85%E5%87%BA%E5%A4%96%E5%9B%B4%E7%9A%84BOX%20%0D%0Aif(left%20%3C%200)%7B%20%0D%0Adragging.style.left%20%3D%200%20%2B%22px%22%3B%20%0D%0A%7D%20%0D%0Aif(top%20%3C%200)%7B%20%0D%0Adragging.style.top%20%3D%200%2B%22px%22%3B%20%0D%0A%7D%20%0D%0Aif(left%20%3E%20box.offsetWidth%20-%20dragBox.offsetWidth)%7B%20%0D%0Adragging.style.left%20%3D%20(box.offsetWidth%20-%20dragBox.offsetWidth%20-%202%20)%2B%22px%22%3B%20%0D%0A%7D%20%0D%0Aif(top%20%3E%20box.offsetHeight%20-%20dragBox.offsetHeight)%7B%20%0D%0Adragging.style.top%20%3D(%20box.offsetHeight%20-%20dragBox.offsetHeight%20-%202%20)%2B%22px%22%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Abreak%3B%20%0D%0Acase%20%22mouseup%22%3A%20%0D%0A%2F%2F%20%E6%B8%85%E7%A9%BA%E6%8B%96%E5%8A%A8%E7%9B%AE%E6%A0%87%20%0D%0Adragging%20%3D%20null%3B%20%0D%0Abreak%3B%20%0D%0A%7D%20%0D%0A%7D%3B%20%0D%0Areturn%20%7B%20%0D%0AdragStart%3A%20function()%20%7B%20%0D%0A%2F%2F%20%E7%BB%91%E5%AE%9A%E4%BA%8B%E4%BB%B6%20%0D%0AVVG.DOM.bindEvent(document%2C%20%22mousedown%22%2C%20drag)%3B%20%0D%0AVVG.DOM.bindEvent(document%2C%20%22mousemove%22%2C%20drag)%3B%20%0D%0AVVG.DOM.bindEvent(document%2C%20%22mouseup%22%2C%20drag)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D()%3B%20%0D%0ADragDrop.dragStart()%3B%20%0D%0A%3C%2Fscript%3E"> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程