管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

js网页中随意拖动的小方块实现代码

<div style="width:140px; height:140px; background-color:pink; cursor:pointer;" id="divBlock" onmousedown="divBlock_event_mousedown(arguments[0]);"></div> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0Afunction%20divBlock_event_mousedown(e)%7B%20%0D%0Avar%20e%2C%20obj%2C%20temp%3B%20%0D%0Aobj%3Ddocument.getElementById(%22divBlock%22)%3B%20%0D%0Ae%3Dwindow.event%3Fwindow.event%3Ae%3B%20%0D%0Aobj.startX%3De.clientX-obj.offsetLeft%3B%20%0D%0Aobj.startY%3De.clientY-obj.offsetTop%3B%20%0D%0Adocument.onmousemove%3Ddocument_event_mousemove%3B%20%0D%0Atemp%3Ddocument.attachEvent%3Fdocument.attachEvent(%22onmouseup%22%2Cdocument_event_mouseup)%3Adocument.addEventListener(%22mouseup%22%2Cdocument_event_mouseup%2C%22%22)%3B%20%0D%0A%7D%20%0D%0Afunction%20document_event_mousemove(e)%7B%20%0D%0Avar%20e%2C%20obj%3B%20%0D%0Aobj%3Ddocument.getElementById(%22divBlock%22)%3B%20%0D%0Ae%3Dwindow.event%3Fwindow.event%3Ae%3B%20%0D%0Awith(obj.style)%7B%20%0D%0Aposition%3D%22absolute%22%3B%20%0D%0Aleft%3De.clientX-obj.startX%2B%22px%22%3B%20%0D%0Atop%3De.clientY-obj.startY%2B%22px%22%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20document_event_mouseup(e)%7B%20%0D%0Avar%20temp%3B%20%0D%0Adocument.onmousemove%3D%22%22%3B%20%0D%0Atemp%3Ddocument.detachEvent%3Fdocument.detachEvent(%22onmouseup%22%2Cdocument_event_mouseup)%3Adocument.removeEventListener(%22mouseup%22%2Cdocument_event_mouseup%2C%22%22)%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E">

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程