javascript实现div拖放

最新推荐文章于 2022-11-15 11:01:49 发布

VIP文章 LYC_2011_ACM

最新推荐文章于 2022-11-15 11:01:49 发布

阅读量914

点赞数

分类专栏： javascript 文章标签： javascript JavaScript Javascript javaScript 拖放清除函数

本文链接：https://blog.csdn.net/LYC_2011_ACM/article/details/8461220

版权

动手练习，真的能发现好多问题，有问题还是好的，趁早解决，哈哈~不过还是有困惑~不知道去哪里找答案，先记着吧，以后看到相关的知识再回过头来看~

<!DOCTYPE html>
<html>
<head>
<style>
#div1{width:100px;height:100px;background:pink;position:absolute;}
</style>
<script>
window.οnlοad=function(){
	var oDiv1 = document.getElementById('div1');
	oDiv1.onmousedown = function(ev){
		var oEvent = ev || event;
		var disX = oEvent.clientX - oDiv1.offsetLeft;   //对象在鼠标按下时所处的位置
		var disY = oEvent.clientY - oDiv1.offsetTop;

		document.onmousemove = function(ev){
			var oEvent = ev || event;
			var l = oEvent.clientX - disX;  //鼠标移动对象的位移
			var h = oEvent.clientY - disY;
			oDiv1.style.left = l + 'px';
			oDiv1.style.top = h + 'px';
		};
	};
	oDiv1.onmouseup = function(ev){
		//清除函数,否则div将永远跟着鼠标移动
		document.onmousemove = null;
		document.onmouseup = null;

最低0.47元/天解锁文章

LYC_2011_ACM

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript实现div拖放

动手练习，真的能发现好多问题，有问题还是好的，趁早解决，哈哈~不过还是有困惑~不知道去哪里找答案，先记着吧，以后看到相关的知识再回过头来看~#div1{width:100px;height:100px;background:pink;position:absolute;}window.onload=function(){ var oDiv1 = document.getEl
复制链接

扫一扫