移除date组件的定位;完成拖拽组件的重构
parent
4e1d3ea10b
commit
4a4d2f1c36
124
src/drag/core.js
124
src/drag/core.js
|
@ -19,6 +19,15 @@ const DEF_OPT = {
|
||||||
export default class Drag {
|
export default class Drag {
|
||||||
constructor(elem) {
|
constructor(elem) {
|
||||||
this.$elem = elem
|
this.$elem = elem
|
||||||
|
|
||||||
|
this._init()
|
||||||
|
}
|
||||||
|
|
||||||
|
_init() {
|
||||||
|
this.$elem.style.transform = ''
|
||||||
|
var { x, y } = this.$elem.getBoundingClientRect()
|
||||||
|
// _x, _y是位移,用于数据修正
|
||||||
|
this.pos = { x, y, _x: 0, _y: 0 }
|
||||||
}
|
}
|
||||||
|
|
||||||
// drag by
|
// drag by
|
||||||
|
@ -38,13 +47,122 @@ export default class Drag {
|
||||||
} else {
|
} else {
|
||||||
ico = '-webkit-' + ico
|
ico = '-webkit-' + ico
|
||||||
}
|
}
|
||||||
this.$drag.style.cursor = ico
|
node.style.cursor = ico
|
||||||
|
|
||||||
bind(this.$drag, 'mousedown', ev => {
|
this._handleResize = bind(window, 'resize', this._init.bind(this))
|
||||||
|
|
||||||
|
// let
|
||||||
|
this._handleMousedown = bind(node, 'mousedown', ev => {
|
||||||
|
if (this.disabled) {
|
||||||
|
return
|
||||||
|
}
|
||||||
var bcr = this.$elem.getBoundingClientRect()
|
var bcr = this.$elem.getBoundingClientRect()
|
||||||
log(bcr)
|
|
||||||
|
/* 修正由于页面有滚动距离,导致拖拽位移计算不正确的情况 */
|
||||||
|
if (bcr.x - this.pos._x !== this.pos.x) {
|
||||||
|
this.pos.x = bcr.x - this.pos._x
|
||||||
|
}
|
||||||
|
if (bcr.y - this.pos._y !== this.pos.y) {
|
||||||
|
this.pos.y = bcr.y - this.pos._y
|
||||||
|
}
|
||||||
|
|
||||||
|
let mx = ev.pageX
|
||||||
|
let my = ev.pageY
|
||||||
|
|
||||||
|
let ww = document.documentElement.clientWidth
|
||||||
|
let wh = document.documentElement.clientHeight
|
||||||
|
|
||||||
|
let tw = bcr.width
|
||||||
|
let th = bcr.height
|
||||||
|
|
||||||
|
//限制区域, 4个值依次是: 上, 右, 下, 左
|
||||||
|
let limit = [0, ww - tw, wh - th, 0]
|
||||||
|
if (this.opt.limit === 'parent') {
|
||||||
|
let pbcr = this.$elem.parentNode.getBoundingClientRect()
|
||||||
|
limit = [pbcr.top, pbcr.right - tw, pbcr.bottom - th, pbcr.left]
|
||||||
|
}
|
||||||
|
|
||||||
|
let handleMove = bind(document, 'mousemove', ev => {
|
||||||
|
// 防止拖动到边缘时导致页面滚动
|
||||||
|
ev.preventDefault()
|
||||||
|
|
||||||
|
let _x = ev.pageX - mx + (bcr.x - this.pos.x)
|
||||||
|
let _y = ev.pageY - my + (bcr.y - this.pos.y)
|
||||||
|
|
||||||
|
// 将另外一个方向的值清零来实现单向拖拽
|
||||||
|
if (this.opt.axis === 'x') {
|
||||||
|
_y = 0
|
||||||
|
}
|
||||||
|
if (this.opt.axis === 'y') {
|
||||||
|
_x = 0
|
||||||
|
}
|
||||||
|
|
||||||
|
// 限制不可拖拽出指定区域(可视区或者父容器)
|
||||||
|
if (this.opt.overflow === false) {
|
||||||
|
if (_x < limit[3] - this.pos.x) {
|
||||||
|
_x = limit[3] - this.pos.x
|
||||||
|
} else if (_x > limit[1] - this.pos.x) {
|
||||||
|
_x = limit[1] - this.pos.x
|
||||||
|
}
|
||||||
|
|
||||||
|
if (_y < limit[0] - this.pos.y) {
|
||||||
|
_y = limit[0] - this.pos.y
|
||||||
|
} else if (_y > limit[2] - this.pos.y) {
|
||||||
|
_y = limit[2] - this.pos.y
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.pos._x = _x
|
||||||
|
this.pos._y = _y
|
||||||
|
this.$elem.dispatchEvent(
|
||||||
|
new CustomEvent('dragging', {
|
||||||
|
detail: {
|
||||||
|
offset: {
|
||||||
|
x: this.pos.x + _x,
|
||||||
|
y: this.pos.y + _y
|
||||||
|
},
|
||||||
|
move: { x: _x, y: _y }
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)
|
||||||
|
this.$elem.style.transform = `translate(${_x}px, ${_y}px)`
|
||||||
|
})
|
||||||
|
|
||||||
|
let handleUp = bind(document, 'mouseup', ev => {
|
||||||
|
this.$elem.dispatchEvent(
|
||||||
|
new CustomEvent('dragged', {
|
||||||
|
detail: {
|
||||||
|
offset: {
|
||||||
|
x: this.pos.x + this.pos._x,
|
||||||
|
y: this.pos.y + this.pos._y
|
||||||
|
},
|
||||||
|
move: { x: this.pos._x, y: this.pos._y }
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)
|
||||||
|
unbind(document, 'mousemove', handleMove)
|
||||||
|
unbind(document, 'mouseup', handleUp)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
return this
|
return this
|
||||||
}
|
}
|
||||||
|
|
||||||
|
on(name, cb) {
|
||||||
|
if (!name || typeof cb !== 'function') {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
return bind(this, name, cb)
|
||||||
|
}
|
||||||
|
|
||||||
|
off(name, cb) {
|
||||||
|
unbind(this, name, cb)
|
||||||
|
}
|
||||||
|
|
||||||
|
destroy() {
|
||||||
|
unbind(window, 'resize', this._handleResize)
|
||||||
|
unbind(this.$drag, 'mousedown', this._handleMousedown)
|
||||||
|
|
||||||
|
delete this.$elem
|
||||||
|
delete this.$drag
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -28,7 +28,7 @@
|
||||||
flex: 0 auto;
|
flex: 0 auto;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 65535;
|
z-index: 65535;
|
||||||
padding: 15px 10px;
|
// padding: 15px 10px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
color: #666;
|
color: #666;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
@ -51,9 +51,9 @@
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 43px;
|
height: 60px;
|
||||||
padding: 0 10px;
|
padding: 15px;
|
||||||
line-height: 43px;
|
line-height: 30px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: nth($cd, 2);
|
color: nth($cd, 2);
|
||||||
}
|
}
|
||||||
|
@ -69,8 +69,8 @@
|
||||||
|
|
||||||
&__ctrl {
|
&__ctrl {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 40px;
|
height: 60px;
|
||||||
padding: 5px 0;
|
padding: 15px;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #454545;
|
color: #454545;
|
||||||
|
@ -105,7 +105,7 @@
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
||||||
&__content {
|
&__content {
|
||||||
padding: 10px;
|
padding: 0 15px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -953,5 +953,9 @@ export default class Layer {
|
||||||
set title(val) {
|
set title(val) {
|
||||||
this.__TITLE__.textContent = val || lang.TITLE
|
this.__TITLE__.textContent = val || lang.TITLE
|
||||||
}
|
}
|
||||||
|
|
||||||
|
mounted() {}
|
||||||
|
|
||||||
|
unmount() {}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -30,7 +30,6 @@
|
||||||
:host {
|
:host {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
|
||||||
min-width: 105px;
|
min-width: 105px;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
|
|
Reference in New Issue