- 一吼过、js拖拽插件的原理
常見的拖拽操作是什么樣的呢泼诱？整過過程大概有下面幾個(gè)步驟：
1坛掠、用鼠標(biāo)點(diǎn)擊被拖拽的元素
2、按住鼠標(biāo)不放，移動(dòng)鼠標(biāo)
3却音、拖拽元素到一定位置改抡，放開鼠標(biāo)
這里的過程涉及到三個(gè)dom事件：onmousedown,onmousemove,onmouseup。所以拖拽的基本思路就是：
1系瓢、用鼠標(biāo)點(diǎn)擊被拖拽的元素觸發(fā)onmousedown
（1）設(shè)置當(dāng)前元素的可拖拽為true阿纤，表示可以拖拽
（2）記錄當(dāng)前鼠標(biāo)的坐標(biāo)x,y
（3）記錄當(dāng)前元素的坐標(biāo)x,y
2、移動(dòng)鼠標(biāo)觸發(fā)onmousemove
（1）判斷元素是否可拖拽夷陋，如果是則進(jìn)入步驟2欠拾，否則直接返回
（2）如果元素可拖拽，則設(shè)置元素的坐標(biāo)
元素的x坐標(biāo) = 鼠標(biāo)移動(dòng)的橫向距離+元素本來的x坐標(biāo) = 鼠標(biāo)現(xiàn)在的x坐標(biāo) - 鼠標(biāo)之前的x坐標(biāo) + 元素本來的x坐標(biāo)
元素的y坐標(biāo) = 鼠標(biāo)移動(dòng)的橫向距離+元素本來的y坐標(biāo) = 鼠標(biāo)現(xiàn)在的y坐標(biāo) - 鼠標(biāo)之前的y坐標(biāo) + 元素本來的y坐標(biāo)
3骗绕、放開鼠標(biāo)觸發(fā)onmouseup
（1）將鼠標(biāo)的可拖拽狀態(tài)設(shè)置成false
- 二藐窄、根據(jù)原理實(shí)現(xiàn)的最基本效果
在實(shí)現(xiàn)基本的效果之前，有幾點(diǎn)需要說明的：
1酬土、元素想要被拖動(dòng)荆忍，它的postion屬性一定要是relative或absolute
2、通過event.clientX和event.clientY獲取鼠標(biāo)的坐標(biāo)
3撤缴、onmousemove是綁定在document元素上而不是拖拽元素本身刹枉，這樣能解決快速拖動(dòng)造成的延遲或停止移動(dòng)的問題
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
width: 50px;
height: 50px;
background-color: yellow;
position: absolute;
cursor: move;
}
</style>
</head>
<body>
<div></div>
<script>
window.onload = function () {
//獲取需要拖拽的div
var div1 = document.getElementsByTagName("div")[0];
//添加鼠標(biāo)按下事件
div1.onmousedown = function (evt) {
var oEvent = evt || event;
//添加doc滑動(dòng)時(shí)間
document.onmousemove = function (evt) {
var oEvent = evt || event;
//重新計(jì)算div的left top值
var left = oEvent.clientX
var top = oEvent.clientY
//left 當(dāng)小于等于零時(shí)，設(shè)置為零 防止div拖出document之外
if (left <= 0) {
left = 0;
}
//當(dāng)left 超過文檔右邊界 設(shè)置為右邊界
else if (left >= document.documentElement.clientWidth - div1.offsetWidth) {
left = document.documentElement.clientWidth - div1.offsetWidth;
}
if (top <= 0) {
top = 0;
}
else if (top >= document.documentElement.clientHeight - div1.offsetHeight) {
top = document.documentElement.clientHeight - div1.offsetHeight;
}
//重新給div賦值
div1.style.top = top + "px";
div1.style.left = left + "px";
}
//添加鼠標(biāo)抬起事件
div1.onmouseup = function () {
//清空事件
document.onmousemove = null;
div1.onmouseup = null;
}
}
}
</script>
</body>
</html>
