JS之鼠标事件拖动一个块移动

系统管理员 2021-09-15 23:06 299阅读 0赞

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		#wrap{
    			width: 100px;
    			height: 100px;
    			background-color: green;
    			position: absolute;
    			left:100px;
    			top:100px;
    			z-index: 100;
    		}
    	</style>
    </head>
    <body>
    	<div id="wrap"></div>
    </body>
    	<script>
    		//鼠标拖拽移动
    		//1.为div绑定鼠标事件
    		//2.将鼠标坐标点与div定位位置进行关联
    		wrap.onmousedown = function(e){
    			var e = e || window.event;
    			//获取按下的位置
    			var h = e.clientY;
    			var w = e.clientX;
    			console.log(h,w);
    			//获得是鼠标按下时相对于元素的位置
    			var ex = w - wrap.offsetLeft;
    			var ey = h - wrap.offsetTop;
    			document.onmousemove = function(h){
    				var h = h||window.event;
    				var  h1 = h.clientY;
    				var  w1 = h.clientX;
    				console.log(h1,w1);
    				wrap.style.left=(w1-ex)+"px"; 
    				wrap.style.top=(h1-ey)+"px";
    			
    			}
    		}
    
    		wrap.onmouseup =function(){
    			document.onmousemove = null;
    		}
    
    	</script>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，299人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS鼠标事件大全

一般事件事件浏览器支持描述 onClick IE3|N2|O3 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击 onDblClick IE4|N4|O 鼠标双击

超、凢脫俗/ 2022年08月09日 00:45/ 0 赞/ 433 阅读

相关鼠标拖动面板

之前写过一篇关于form表单验证随笔，后来添加了一点点内容，使得可以使用鼠标将其拖动，为了完整性，还是写一遍随笔吧；加上这部分内容后，HTML和CSS部分，也进行了少量修改，这

女爷i/ 2022年06月16日 08:28/ 0 赞/ 185 阅读

相关 JS的鼠标事件

onmouseover和onmouseout方法： <!DOCTYPE html> <html> <body> <div οnmοuseοver="mO

旧城等待，/ 2022年06月01日 02:10/ 0 赞/ 234 阅读

相关鼠标移动事件

一介绍鼠标移动事件（onmousemove）是鼠标在页面上进行移动时触发事件处理程序，可以在该事件中用document对象实时读取鼠标在页面中的位置。二应用

快来打我*/ 2022年05月12日 00:00/ 0 赞/ 220 阅读

相关 js实现鼠标按下拖动标签

鼠标的事件有很多，这里要用到的是mousedown事件。 > mousedown事件定义和用法： > 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedow

矫情吗；*/ 2022年03月25日 14:36/ 0 赞/ 437 阅读

相关 JavaScript鼠标移动事件

开发工具与关键技术：DW与css 作者：戴怡斌撰写时间：2019年2月17日下面我们来看一个JavaScript鼠标移动选择

叁歲伎倆/ 2022年03月17日 01:08/ 0 赞/ 340 阅读

相关 js鼠标拖动元素移动

拖动元素移动 var odiv = document.getElementsByTagName('div')[0]; //给需要移动的元

以你之姓@/ 2022年01月28日 00:13/ 0 赞/ 312 阅读

相关 JS之鼠标事件拖动一个块移动

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8">

系统管理员/ 2021年09月15日 23:06/ 0 赞/ 300 阅读

相关 js 鼠标拖动div

div中心跟踪鼠标动而动得到鼠标坐标，移动时div的左上距离为鼠标两坐标减去div左上顶点到中心的距离 div任意位置随鼠标动而动得到鼠标第一次坐标，移动时div

忘是亡心i/ 2021年07月24日 17:05/ 0 赞/ 414 阅读

相关 js drag拖动事件

(1)为了让元素可拖动，需要使用 HTML5 draggable 属性!!!important。 (2)链接和图片默认是可拖动的，不需要 draggable 属

淡淡的烟草味﹌/ 2021年07月24日 13:05/ 0 赞/ 362 阅读