移除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 {
|
||||
constructor(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
|
||||
|
@ -38,13 +47,122 @@ export default class Drag {
|
|||
} else {
|
||||
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()
|
||||
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
|
||||
}
|
||||
|
||||
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;
|
||||
position: absolute;
|
||||
z-index: 65535;
|
||||
padding: 15px 10px;
|
||||
// padding: 15px 10px;
|
||||
border-radius: 3px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
|
@ -51,9 +51,9 @@
|
|||
|
||||
&__title {
|
||||
width: 100%;
|
||||
height: 43px;
|
||||
padding: 0 10px;
|
||||
line-height: 43px;
|
||||
height: 60px;
|
||||
padding: 15px;
|
||||
line-height: 30px;
|
||||
font-size: 16px;
|
||||
color: nth($cd, 2);
|
||||
}
|
||||
|
@ -69,8 +69,8 @@
|
|||
|
||||
&__ctrl {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 5px 0;
|
||||
height: 60px;
|
||||
padding: 15px;
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
color: #454545;
|
||||
|
@ -105,7 +105,7 @@
|
|||
background: #fff;
|
||||
|
||||
&__content {
|
||||
padding: 10px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -953,5 +953,9 @@ export default class Layer {
|
|||
set title(val) {
|
||||
this.__TITLE__.textContent = val || lang.TITLE
|
||||
}
|
||||
|
||||
mounted() {}
|
||||
|
||||
unmount() {}
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -30,7 +30,6 @@
|
|||
:host {
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
min-width: 105px;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
|
Reference in New Issue