### JavaScript实现拖拽效果知识点
#### 一、事件对象与坐标获取
要实现拖拽效果，首先要熟悉事件对象中的坐标属性，它们是实现拖拽功能的基础。
- **clientX** 和 **clientY**: 鼠标点击位置相对于浏览器可视区域的水平和垂直偏移量。这两个属性不会计算页面的水平和垂直滚动距离。
- **offsetX** 和 **offsetY**: 鼠标点击位置相对于触发事件对象的水平和垂直距离。
- **pageX** 和 **pageY**: 鼠标点击位置相对于网页左上角的水平和垂直偏移量，包括水平和垂直滚动的距离。
- **offsetLeft** 和 **offsetTop**: 如果父元素中有定位元素，返回距离当前元素最近的定位元素边缘的距离；如果父元素中没有定位元素，返回的是相对于body左边缘的距离。
#### 二、元素尺寸获取
实现拖拽功能，还需要获取元素的宽度和高度。
- **offsetWidth** 和 **offsetHeight**: 返回元素的外部宽度和高度，包括边框、滚动条、内边距等。
- **clientWidth** 和 **clientHeight**: 返回元素的内部宽度和高度，不包括边框，但包括内边距。
- **clientWidth** 和 **offsetWidth** 的区别在于是否包含边框。
#### 三、实现拖拽的效果
实现拖拽效果的基本思路是通过事件监听，实时获取鼠标的坐标位置，并相应地调整目标元素的位置。
#### 四、HTML结构与CSS样式
在进行拖拽操作之前，需要先搭建好HTML结构，并设置相应的CSS样式。
- 示例结构：
```html
<div class="wrap">
<div class="cover"></div>
</div>
```
- 示例CSS样式：
```css
* {
margin: 0;
padding: 0;
}
.wrap {
width: 500px;
height: 500px;
border: 1px solid deeppink;
position: relative;
margin: 50px auto;
}
.cover {
width: 150px;
height: 150px;
background: rgba(200, 7, 99, 0.5);
display: none;
position: absolute;
left: 0;
top: 0;
cursor: move;
}
```
注意：要给大盒子（wrap）和小盒子（cover）进行定位，通常是子绝父相。
#### 五、JavaScript实现
通过JavaScript添加事件监听器来实现拖拽效果。以下是一个示例代码：
```javascript
var wrap = document.querySelector(".wrap");
var cover = document.querySelector(".cover");
wrap.onmouseover = function() {
cover.style.display = "block";
};
wrap.onmousemove = function(e) {
var e = e || window.event;
var x1 = e.clientX;
var y1 = e.clientY;
var halfWidth = cover.clientWidth / 2;
var halfHeight = cover.clientHeight / 2;
var wrapLeft = wrap.offsetLeft;
var wrapTop = wrap.offsetTop;
var l = x1 - wrapLeft - halfWidth;
var t = y1 - wrapTop - halfHeight;
if (l <= 0) {
l = 0;
} else if (l >= wrap.clientWidth - cover.clientWidth) {
l = wrap.clientWidth - cover.clientWidth;
}
if (t <= 0) {
t = 0;
} else if (t >= wrap.clientHeight - cover.clientHeight) {
t = wrap.clientHeight - cover.clientHeight;
}
cover.style.left = l + "px";
*** = t + "px";
};
wrap.onmouseout = function() {
cover.style.display = "none";
};
```
以上代码段首先获取了wrap和cover元素，然后为wrap添加了mouseover和mousemove事件处理函数。在mousemove事件处理函数中，根据鼠标移动的位置实时计算cover的新位置，并设置cover的style来更新其位置。如果鼠标移出wrap元素，则通过mouseout事件使cover元素隐藏。
