//---元素拖动插件
|
const dragging = (data) => {
|
var $this = data.dom;
|
var xPage;
|
var yPage;
|
var X; //
|
var Y; //
|
var xRand = 0; //
|
var yRand = 0; //
|
var father = getParent($this);
|
var defaults = {
|
move: 'both',
|
randomPosition: true,
|
hander: 1,
|
notelement: '.bf-container',
|
};
|
var opt = Object.assign(defaults, data);
|
var movePosition = opt.move;
|
var random = opt.randomPosition;
|
|
var hander = opt.hander;
|
var notelement = opt.notelement;
|
if (hander == 1) {
|
hander = $this;
|
} else {
|
hander = document.querySelectorAll('.hander')[0];
|
}
|
// hander.setAttribute('style', 'cursor: move');
|
//---初始化
|
father.style.position = 'relative';
|
father.style.overflow = 'hidden';
|
$this.style.position = 'absolute';
|
hander.style.cursor = 'move';
|
var faWidth = father.clientWidth;
|
var faHeight = father.clientHeight;
|
var computedStyle = getComputedStyle($this);
|
var thisWidth = $this.clientWidth + parseInt(computedStyle.paddingLeft) + parseInt(computedStyle.paddingRight);
|
var thisHeight = $this.clientHeight + parseInt(computedStyle.paddingTop) + parseInt(computedStyle.paddingBottom);
|
|
var mDown = false; //
|
var positionX;
|
var positionY;
|
var moveX;
|
var moveY;
|
|
if (random) {
|
thisRandom();
|
}
|
function thisRandom() {
|
//随机函数
|
this.forEach(function (elem) {
|
var randY = Math.floor(Math.random() * (faHeight - thisHeight));
|
var randX = Math.floor(Math.random() * (faWidth - thisWidth));
|
if (movePosition.toLowerCase() === 'x') {
|
elem.style.left = randX + 'px';
|
} else if (movePosition.toLowerCase() === 'y') {
|
elem.style.top = randY + 'px';
|
} else if (movePosition.toLowerCase() === 'both') {
|
elem.style.top = randY + 'px';
|
elem.style.left = randX + 'px';
|
}
|
});
|
}
|
hander.addEventListener('mousedown', function (e) {
|
// 假设 father 是你的父元素的 ID
|
var children = father.children; // 获取所有子元素
|
for (var i = 0; i < children.length; i++) {
|
if (children[i] !== notelement) {
|
children[i].style.zIndex = '1';
|
}
|
}
|
|
$this.style.zIndex = '2';
|
mDown = true;
|
X = e.pageX;
|
Y = e.pageY;
|
var rect = $this.getBoundingClientRect();
|
positionX = rect.left;
|
positionY = rect.top;
|
return false;
|
});
|
document.addEventListener('mouseup', function (e) {
|
mDown = false;
|
});
|
|
document.addEventListener('mousemove', function (e) {
|
xPage = e.pageX; //--
|
moveX = positionX + xPage - X;
|
|
yPage = e.pageY; //--
|
moveY = positionY + yPage - Y;
|
|
const thisXMove = () => {
|
//x轴移动
|
if (mDown) {
|
$this.style.left = moveX + 'px';
|
} else {
|
return;
|
}
|
|
if (moveX < 0) {
|
$this.style.left = '0';
|
}
|
if (moveX > faWidth - thisWidth) {
|
$this.style.left = faWidth - thisWidth + 'px';
|
}
|
|
return moveX;
|
};
|
|
const thisYMove = () => {
|
//y轴移动
|
if (mDown) {
|
$this.style.top = moveY + 'px';
|
} else {
|
return;
|
}
|
|
if (moveY < 0) {
|
$this.style.top = '0';
|
}
|
if (moveY > faHeight - thisHeight) {
|
$this.style.top = faHeight - thisHeight + 'px';
|
}
|
|
return moveY;
|
};
|
|
const thisAllMove = () => {
|
//全部移动
|
if (mDown) {
|
$this.style.left = moveX - thisWidth + 'px';
|
$this.style.top = moveY - thisHeight + 'px';
|
} else {
|
return;
|
}
|
|
if (moveX < 0) {
|
$this.style.left = '0';
|
}
|
if (moveX > faWidth - thisWidth) {
|
$this.style.left = faWidth - thisWidth + 'px';
|
}
|
|
if (moveY < 0) {
|
$this.style.top = '0';
|
}
|
if (moveY > faHeight - thisHeight) {
|
$this.style.top = faHeight - thisHeight + 'px';
|
}
|
};
|
if (movePosition.toLowerCase() == 'x') {
|
thisXMove();
|
} else if (movePosition.toLowerCase() == 'y') {
|
thisYMove();
|
} else if (movePosition.toLowerCase() == 'both') {
|
thisAllMove();
|
}
|
});
|
};
|
|
const getParent = (dom) => {
|
return dom.parentNode;
|
};
|
export default dragging;
|
