原生js如何实现拖拽事件（代码）

来源：动视网责编：小采时间：2020-11-27 19:32:15

原生js如何实现拖拽事件（代码）

原生js如何实现拖拽事件（代码）:本篇文章给大家带来的内容是关于原生js如何实现拖拽事件（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。<!DOCTYPE html> <html lang="en"> <head> <meta charset=&

推荐度：

点击下载本文 文档为doc格式

导读原生js如何实现拖拽事件（代码）:本篇文章给大家带来的内容是关于原生js如何实现拖拽事件（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。<!DOCTYPE html> <html lang="en"> <head> <meta charset=&

本篇文章给大家带来的内容是关于原生js如何实现拖拽事件（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.box{
	width:200px;
	height:200px;
	background-color: red;
	position: absolute;
	left:0;
	top:0;
	}
	</style>
</head>
<body>
	<p class='box'></p>
	<script>
	var box = document.querySelector('.box');
	box.onmousedown = function(e){
	var event = e || window.event;
	var target = event.target || event.srcElement;
	var disX = event.clientX - target.offsetLeft;
	var disY = event.clientY - target.offsetTop;
	document.onmousemove = function(event){
	// 注意：这里要有自己的事件对象
	target.style.left = event.clientX - disX + 'px';
	target.style.top = event.clientY - disY + 'px';
	document.onmouseup = function(){
	document.onmousedown = null;
	document.onmousemove = null;
	}
	}
	}
	</script>
	
</body>
</html>

原生js如何实现拖拽事件（代码）

推荐度：

点击下载本文 文档为doc格式

标签：事件实现 js

热门焦点

原生js如何实现拖拽事件（代码）

原生js如何实现拖拽事件（代码）

原生js如何实现拖拽事件（代码）

最新推荐

猜你喜欢

热门推荐