1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
// import Vue from 'vue'
const drag = {}
drag.install = vue => {
Vue.directive('drag', { // eslint-disable-line
inserted: function(el, binding, VNode) {
el.style.position = 'relative'
const bodyWrap = document.createElement('div')
const bodyWrapper = 'position:absolute;top:0;left:0;height:100%;width:100%;background-color:transparent;z-index:99999'
bodyWrap.setAttribute('style', bodyWrapper)
const currentDiv = el
let startTop = null
if (binding.value && binding.value.includes('right')) {
const divEleRight = document.createElement('div')
const divDragRight = 'position:absolute;right:0;top:0;background-color:transparent;height:100%;width:4px;cursor:e-resize'
divEleRight.setAttribute('style', divDragRight)
el.appendChild(divEleRight)
divEleRight.onmousedown = e => {
e.preventDefault()
let left = null
document.body.appendChild(bodyWrap)
document.body.style.cursor = 'e-resize'
document.onmousemove = e => {
e.stopPropagation()
left = e.clientX - currentDiv.offsetLeft
currentDiv.style.minWidth = left + 'px'
}
document.onmouseup = e => {
e.preventDefault()
document.body.removeChild(bodyWrap)
document.body.style.cursor = null
document.onmousemove = null
document.onmouseup = null
}
}
} else if (binding.value && binding.value.includes('bottom')) {
const divEleBottom = document.createElement('div')
const divDragBottom = 'position:absolute;bottom:0;left:0;background-color:transparent;height:4px;width:100%;cursor:s-resize'
divEleBottom.setAttribute('style', divDragBottom)
el.appendChild(divEleBottom)
divEleBottom.onmousedown = e => {
e.preventDefault()
let top = null
document.body.appendChild(bodyWrap)
document.body.style.cursor = 's-resize'
document.onmousemove = e => {
e.stopPropagation()
top = e.clientY - currentDiv.offsetTop
currentDiv.style.height = top + 'px'
}
document.onmouseup = e => {
e.preventDefault()
document.body.removeChild(bodyWrap)
document.body.style.cursor = null
document.onmousemove = null
document.onmouseup = null
}
}
} else if (binding.value && binding.value.includes('left')) {
const divEleLeft = document.createElement('div')
const divDragLeft = 'position:absolute;left:0;top:0;background-color:transparent;height:100%;width:4px;cursor:e-resize'
divEleLeft.setAttribute('style', divDragLeft)
el.appendChild(divEleLeft)
divEleLeft.onmousedown = e => {
e.preventDefault()
let left = null
document.body.appendChild(bodyWrap)
document.body.style.cursor = 'e-resize'
const divLeft = currentDiv.offsetLeft
const divWidth = currentDiv.offsetWidth
document.onmousemove = e => {
e.stopPropagation()
left = divWidth - (e.clientX - divLeft)
currentDiv.style.marginLeft = (e.clientX - divLeft) + 'px'
currentDiv.style.width = left + 'px'
}
document.onmouseup = e => {
e.preventDefault()
document.body.removeChild(bodyWrap)
document.body.style.cursor = null
document.onmousemove = null
document.onmouseup = null
}
}
} else if (binding.value && binding.value.includes('top')) {
const divEleTop = document.createElement('div')
const divDragTop = 'position:absolute;top:0;left:0;background-color:transparent;height:4px;width:100%;cursor:s-resize'
divEleTop.setAttribute('style', divDragTop)
el.appendChild(divEleTop)
divEleTop.onmousedown = e => {
e.preventDefault()
let top = null
document.body.appendChild(bodyWrap)
document.body.style.cursor = 's-resize'
let isTop = false
const topY = currentDiv.offsetTop
const divHeight = currentDiv.offsetHeight
if (!startTop) {
startTop = topY
}
currentDiv.style.marginTop ? isTop = true : isTop = false
document.onmousemove = e => {
e.stopPropagation()
if (e.clientY > topY) {
top = divHeight - (e.clientY - topY)
currentDiv.style.height = top + 'px'
if (isTop) {
currentDiv.style.marginTop = (e.clientY - startTop) + 'px'
} else {
currentDiv.style.marginTop = (e.clientY - topY) + 'px'
}
} else {
top = divHeight + (topY - e.clientY)
currentDiv.style.height = top + 'px'
currentDiv.style.marginTop = (e.clientY - startTop) + 'px'
}
}
document.onmouseup = e => {
e.preventDefault()
document.body.removeChild(bodyWrap)
document.body.style.cursor = null
document.onmousemove = null
document.onmouseup = null
}
}
}
}
})
}
export default drag