// es6方式
class DragBar {
constructor(container = {}, options) {
const origin = {};
const mergeOptions = {};
// 一些默认参数
// 默认是水平方向放置
const _options = {
height: 500,
width: 5,
direction: "horizontal" // 如果他传递的是 vertical 则要把他放置成 竖直方向上
}
this._options = _options;
// 保存原始参数
for (let key in options) {
origin[key] = options[key];
}
// 保存合并的数据touchend
Object.assign(mergeOptions, _options, origin);
this.origin = origin;
this.mergeOptions = mergeOptions;
// 获取传递进来的元素
if (typeof container === 'string') {
this.objString = container;
this.container = document.querySelector(container);
this.bar = this.container.children[0];
} else if (typeof container === "object" && container.nodeType === 1) {
this.container = container;
this.bar = this.container.children[0];
} else {
throw new TypeError("the container must be a string for example `#container` or `.container` or a object for nodeType=1")
}
console.log(this);
}
init() {
this.createMask(this.mergeOptions.cover);
this.mouseDown();
this.mouseUp();
this.touchStart();
this.touchEnd();
};
createMask(bool = false) {
if (bool) {
var w = this.mergeOptions.direction === "horizontal" ? 0 : this.container.offsetWidth;
var h = this.mergeOptions.direction === "vertical" ? 0 : this.container.offsetHeight;
var mask = document.createElement("div");
mask.className = "mask";
mask.id = "mask";
mask.style.position = "absolute";
mask.style.left = 0;
mask.style.top = 0;
mask.style.width = w + "px";
mask.style.height = h + "px";
mask.style.background = this.mergeOptions.background;
this.mask = mask;
this.container.appendChild(mask);
}
};
// 事件绑定
bindEvent(element, type, fn) {
if (element.addEventListener) {
element.addEventListener(type, fn, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, fn);
} else {
element["on" + type] = null;
}
};
// 事件移除
removeEvent(element, type, fn) {
if (element.removeEventListener) {
element.removeEventListener(type, fn, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, fn);
} else {
element["on" + type] = null;
}
};
// pc端 鼠标按下
mouseDown() {
var me = this;
me._mousedown = function(e) {
console.log("mousedown");
me.startClientXY = {
startX: e.clientX,
startY: e.clientY,
leftVal: e.clientX - me.bar.offsetLeft,
topVal: e.clientY - me.bar.offsetTop
}
console.log(me.startClientXY);
me.mouseMove();
};
this.bindEvent(me.bar, "mousedown", me._mousedown);
};
// 移动端 手指按下
touchStart() {
var me = this;
me._touchstart = function(e) {
console.log("touchstart", e);
me.startTouchXY = {
touchX: e.touches[0].pageX,
touchY: e.touches[0].pageY,
leftVal: e.touches[0].pageX - me.bar.offsetLeft,
topVal: e.touches[0].pageY - me.bar.offsetTop
};
console.log('touchstart', me.startTouchXY);
me.touchMove();
};
this.bindEvent(me.bar, "touchstart", me._touchstart);
};
// pc端 鼠标移动
mouseMove() {
var me = this;
me._mousemove = function(e) {
console.log("mousemove");
me.endClientXY = {
endX: e.clientX,
endY: e.clientY,
barLeft: e.clientX - me.startClientXY.leftVal,
barTop: e.clientY - me.startClientXY.topVal,
}
if (me.endClientXY.barLeft < 0) {
me.endClientXY.barLeft = 0;
} else if ((me.endClientXY.barLeft > (me.container.offsetWidth - me.bar.offsetWidth))) {
console.log(me.container.offsetWidth, me.bar.offsetWidth);
console.log(me.endClientXY)
me.endClientXY.barLeft = me.container.offsetWidth - me.bar.offsetWidth;
}
me.mask.style.width = me.endClientXY.barLeft + 'px';
me.bar.style.left = me.endClientXY.barLeft + "px";
console.log("已经走了" + parseInt(me.endClientXY.barLeft / (me.container.offsetWidth - me.bar.offsetWidth) * 100) + "%");
console.log(me.endClientXY);
//防止选择内容--当拖动鼠标过快时候，弹起鼠标，bar也会移动，修复bug
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
this.bindEvent(document, "mousemove", me._mousemove)
};
// 移动端 手指移动
touchMove() {
var me = this;
me._touchmove = function(e) {
me.moveTouchXY = {
touchX: e.touches[0].pageX,
touchY: e.touches[0].pageY,
barLeft: e.touches[0].pageX - me.startTouchXY.leftVal,
barTop: e.touches[0].pageY - me.startTouchXY.topVal,
};
if ((me.moveTouchXY.barLeft < 0)) {
me.moveTouchXY.barLeft = 0;
} else if ((me.moveTouchXY.barLeft > (me.container.offsetWidth - me.bar.offsetWidth))) {
me.moveTouchXY.barLeft = me.container.offsetWidth - me.bar.offsetWidth;
}
me.mask.style.width = me.moveTouchXY.barLeft + 'px';
me.bar.style.left = me.moveTouchXY.barLeft + "px";
console.log("已经走了" + parseInt(me.moveTouchXY.barLeft / (me.container.offsetWidth - me.bar.offsetWidth) * 100) + "%");
//防止选择内容--当拖动鼠标过快时候，弹起鼠标，bar也会移动，修复bug
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
console.log("touchmove", me.moveTouchXY);
};
this.bindEvent(document, "touchmove", me._touchmove);
};
// pc端鼠标抬起
mouseUp() {
var me = this;
me._mouseup = function() {
me.removeEvent(document, "mousemove", me._mousemove);
};
this.bindEvent(document, "mouseup", me._mouseup);
};
// 移动端 手指停止移动
touchEnd() {
var me = this;
// 在移动端移除pc端的mouseup事件
me._touchend = function() {
me.removeEvent(document, 'touchmove', me._mousemove);
};
this.bindEvent(document, "touchend", me._touchend);
};
}
// 内部初始化
DragBar.init = function(container, options) {
new DragBar(container, options).init();
}
window.DragBar = DragBar;
