js实现拖拽案例

最新推荐文章于 2023-04-17 22:40:37 发布

chcfner

最新推荐文章于 2023-04-17 22:40:37 发布

阅读量1k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/chcfner/article/details/79439711

版权

本文介绍了一个JavaScript实现的拖拽案例，展示了如何创建基本的拖放效果。通过示例代码，读者可以理解并应用到自己的项目中。

摘要由CSDN通过智能技术生成

拽案例,效果如下：

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title></title>
	<style>
		.box {
			width: 100px;
			height: 100px;
			background-color: red;
			position: absolute;
			left: 500px;
			top: 200px;
			cursor: pointer;
		}
	</style>
</head>
<script>
	window.onload = function () {
		//获取事件相关元素；
		var box = document.getElementsByClassName("box")[0];
		//给元素绑定onmousedown事件
		box.onmousedown = function (event) {
			//获取鼠标指针相对于盒子的距离；
			var x = event.clientX - box.