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

时间：2020-12-31 15:11:52|栏目：JavaScript代码|点击：次

<div style="width:140px; height:140px; background-color:pink; cursor:pointer;" id="divBlock" onmousedown="divBlock_event_mousedown(arguments[0]);"></div> <script> function divBlock_event_mousedown(e){ var e, obj, temp; obj=document.getElementById("divBlock"); e=window.event?window.event:e; obj.startX=e.clientX-obj.offsetLeft; obj.startY=e.clientY-obj.offsetTop; document.onmousemove=document_event_mousemove; temp=document.attachEvent?document.attachEvent("onmouseup",document_event_mouseup):document.addEventListener("mouseup",document_event_mouseup,""); } function document_event_mousemove(e){ var e, obj; obj=document.getElementById("divBlock"); e=window.event?window.event:e; with(obj.style){ position="absolute"; left=e.clientX-obj.startX+"px"; top=e.clientY-obj.startY+"px"; } } function document_event_mouseup(e){ var temp; document.onmousemove=""; temp=document.detachEvent?document.detachEvent("onmouseup",document_event_mouseup):document.removeEventListener("mouseup",document_event_mouseup,""); } </script>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

上一篇：JavaScript中的object转换成number或string规则介绍

栏目：JavaScript代码

下一篇：一个简单的javascript图片放大效果代码

本文标题：js网页中随意拖动的小方块实现代码

本文地址：http://www.codeinn.net/misctech/38795.html

更多JavaScript代码

JavaScript代码

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

阅读排行

推荐教程