本文介绍了如何在es6中利用class来封装拖拽功能。通过给拖拽元素添加onmousedown事件，记录鼠标点击位置，并监听onmousemove和onmouseup事件来实现元素的移动。在鼠标移动时更新元素的top和left属性，并可限制拖动范围。当鼠标抬起时移除事件监听，整个过程使得js的写法更接近Java。
1.es6 class的使用
之前在Jquery时代，实现拖拽功能都是使用函数直接搞，有了es6中的class，可以很好的封装相关的功能，只要给个ID就可以，想拖谁就拖谁！不过步骤还是老一套。
- 先在拖拽元素DOM上添加onmousedown事件，获取鼠标点击位置，并添加document的onmousemove事件和onmouseup事件
- 只要鼠标不弹起，就会执行onmousemove事件，然后事件中给拖拽元素top，left赋值，不想让他出去可以，限制范围
- 鼠标弹起时，移除事件
js真是有点Java的样子啦！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<script type="text/javascript">
class Drag {
constructor(id) {
this.oDiv = document.
最低0.47元/天 解锁文章
扫一扫
117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
