原生js拖拽(第一课 未兼容))

/*
拖拽流程:
1、第一步点击需要拖动的元素
2、在点击下的元素被选中,进行move移动
3、当鼠标弹起的时候,停止动作
4、点击元素oDIV的时候,可用的是oDIV区域,而move和up则是全局区域,也就是整个文档通用,即应该用document
*/
oDIV = document.getElementById("gaga");
oDIV.onmousedown = function( e ){     // 当鼠标点击下去的时候
	var diffX = e.clientX - oDIV.offsetLeft;       // 点击的位置距离浏览器最左边的位置(clientX) 再减去被点击元素距离最左边的位置(oDIV.offetLeft)  在引动的所点击的元素距离最左边的位置是不确定的 所以需要这个结果
	var diffY = e.clientY - oDIV.offsetTop;     // 点击的位置距离浏览器顶部的位置(clientY) 再减去被点击元素距离顶部的位置(oDIV.offsetTop)  在引动的所点击的元素距离顶部的位置是不确定的 所以需要这个结果
	document.onmousemove = function( e ){    // 当按下鼠标不放的时候
		var e = e || window.event;
		oDIV.style.top = e.clientY - diffY + "px";
		oDIV.style.left = e.clientX - diffX + "px";
	};
	document.onmouseup = function(){      // 当鼠标弹起的时候
		document.onmousemove = null;    // 清空鼠标按下鼠标不放的事件
		document.onmouseup = null;    // 清空鼠标弹起事件
	}
};

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值