1、拖拽插件的參數(shù)
| 參數(shù) |
參數(shù)表示的意義 |
| el |
要被拖拽的對象 |
| dire |
"x" , "y" 不傳的時候兩個方向都能拖拽 |
| dragStart |
function(el,e) {} //監(jiān)聽拖拽開始 |
| dragging |
function(el,e) {} //監(jiān)聽拖拽過程 |
| dragEnd |
function(el,e) {} //監(jiān)聽拖拽結(jié)束 |
2譬圣、鼠標(biāo)拖拽js代碼
function drag(options) {
//接收傳入的參數(shù)
var el = options.el; //必傳
//方向
var dire = options.dire || "";
//監(jiān)聽方法
var dragStart = options.dragStart || "";
var dragging = options.dragging || "";
var dragEnd = options.dragEnd || "";
//1、給el綁定鼠標(biāo)按下
el.addEventListener('mousedown', function (e) {
//獲取鼠標(biāo)在el中的位置
this._x = e.pageX - getEl2Dom(el, "Left");
this._y = e.pageY - getEl2Dom(el, "Top");
//獲取當(dāng)前被拖拽對象el的起始位置（為了保證拖拽后才觸發(fā)
this._x0 = this.offsetLeft;
this._y0 = this.offsetTop;
//給document注冊移動方法
document.addEventListener('mousemove', move);
document.addEventListener('mouseup', mouseup)
//調(diào)用傳遞進來的dragStart
if (typeof dragStart == 'function') {
dragStart(el, e); //對外回調(diào)唇兑，拖拽開始
}
})
//2辫狼、給document綁定抬起事件處理函數(shù)
function mouseup(e) {
//拖拽結(jié)束后 鼠標(biāo)移動事件處理函數(shù)
document.removeEventListener('mousemove', move);
//刪除鼠標(biāo)抬起處理函數(shù)
document.removeEventListener('mouseup', mouseup);
//為了保證一定是在拖拽之后執(zhí)行聪蘸，需要判斷鼠標(biāo)抬起時，盒子的位置是否
//發(fā)生變化疯搅，如果盒子位置沒變化濒生，就不執(zhí)行
//1、獲取抬起時盒子的位置
var xend = el.offsetLeft;
var yend = el.offsetTop;
if (el._x0 == xend && el._y0 == yend) return;
//回調(diào)外部傳入的dragEnd
if (typeof dragEnd == 'function') {
dragEnd(el, e); //對外回調(diào)幔欧，當(dāng)拖拽結(jié)束后
}
}
//3罪治、移動過程
function move(e) {
//獲取鼠標(biāo)到被拖拽的對象丽声，定位父級邊界之間的距離
var x = e.pageX - getEl2Dom(el.offsetParent, "Left") - (el.offsetParent ? el.offsetParent.clientLeft : 0);
var y = e.pageY - getEl2Dom(el.offsetParent, "Top") - (el.offsetParent ? el.offsetParent.clientTop : 0);
//計算位置
var nowX = x - el._x;
var nowY = y - el._y;
//邊界區(qū)域控制 X軸
var W = el.offsetParent ? el.offsetParent.clientWidth - el.offsetWidth :
document.documentElement.clientWidth - el.offsetWidth;
nowX = nowX < 0 ? 0 : nowX;
nowX = nowX > W ? W : nowX;
//Y軸
var H = el.offsetParent ? el.offsetParent.clientHeight - el.offsetHeight :
document.documentElement.clientHeight - el.offsetHeight;
nowY = nowY < 0 ? 0 : nowY;
nowY = nowY > H ? H : nowY;
//設(shè)置樣式
if (dire != 'y') {
el.style.left = nowX + 'px';
}
if (dire != 'x') {
el.style.top = nowY + 'px';
}
//調(diào)用一下外部的回調(diào)函數(shù)
if (typeof dragging == 'function') {
dragging(el, e); //移動過程中不斷調(diào)用外部的 dragging函數(shù)
}
}
//獲取盒子到文檔邊界之間的距離()
function getEl2Dom(el, fx) {
if (el == null) return 0;
//獲取當(dāng)前盒子的左側(cè)定位
var offsetLeft = el["offset" + fx];
//獲取當(dāng)前盒子的定位父級
var parent = el.offsetParent;
//獲取父級的邊框?qū)挾? var clientLeft = parent ? parent["client" + fx] : 0;
return offsetLeft + clientLeft + getEl2Dom(el.offsetParent, fx)
}
}
3、鼠標(biāo)拖拽示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap{
width: 500px;
height: 300px;
border: 1px solid red;
position: relative;
}
.box{
width: 100px;
height: 100px;
background-color: sandybrown;
position: absolute;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
<!-- 引入拖拽js代碼 -->
<script src="./drag.js"></script>
<script>
drag({
el : document.querySelector('.box'),
dire : "x,y",
dragStart : function(el,e){
console.log("開始拖拽规阀，第一次調(diào)用",el,e)
} ,
dragging : function(el,e){
console.log("拖拽過程",el.offsetLeft)
},
dragEnd : function(el,e){
console.log("拖拽結(jié)束",el,e)
}
})
</script>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
