Skip to content

Commit d159bed

Browse files
wenlngwenlng
committed
chroe: darg event
1 parent e3ad5c3 commit d159bed

File tree

7 files changed

+155
-29
lines changed

7 files changed

+155
-29
lines changed

‎example/App.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,13 @@ const slideEvents = {
8484
slideData.thumbY = 60
8585
slideData.image = clickImage2
8686
},
87+
confirm(dots: any, clear: Function): void {
88+
console.log("dots >>>>>>>", dots)
89+
90+
setTimeout(() => {
91+
clear()
92+
}, 100)
93+
},
8794
close(): void {
8895
console.log("close >>>>>>>")
8996
}
@@ -101,6 +108,13 @@ const slideRegionEvents = {
101108
move(x: number, y: number): void {
102109
console.log("move >>>>>>>", x, y)
103110
},
111+
confirm(dots: any, clear: Function): void {
112+
console.log("dots >>>>>>>", dots)
113+
114+
setTimeout(() => {
115+
clear()
116+
}, 100)
117+
},
104118
refresh(): void {
105119
console.log("refresh >>>>>>>")
106120
@@ -122,6 +136,13 @@ const rotateEvents = {
122136
rotate(angle: number): void {
123137
console.log("rotate >>>>>>>", angle)
124138
},
139+
confirm(point: any, clear: Function): void {
140+
console.log("point >>>>>>>", point)
141+
142+
setTimeout(() => {
143+
clear()
144+
}, 100)
145+
},
125146
refresh(): void {
126147
console.log("refresh >>>>>>>")
127148
rotateData.image = clickImage2

‎packages/components/rotate/hooks/handler.ts‎

Lines changed: 39 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export function useHandler(
2727

2828
let angle = 0
2929
let isMoving = false
30+
let tmpLeaveDragEvent: Event|any = null
3031
let startX = 0;
3132
if (touch) {
3233
startX = touch.pageX - offsetLeft
@@ -74,12 +75,7 @@ export function useHandler(
7475
return
7576
}
7677

77-
dragBarRef.value.removeEventListener("mousemove", moveEvent, false)
78-
dragBarRef.value.removeEventListener("touchmove", moveEvent, { passive: false })
79-
80-
dragBarRef.value.removeEventListener( "mouseup", upEvent, false)
81-
dragBarRef.value.removeEventListener( "mouseout", upEvent, false)
82-
dragBarRef.value.removeEventListener("touchend", upEvent, false)
78+
clearEvent()
8379

8480
isMoving = false
8581
event.confirm && event.confirm(parseInt(angle.toString()), () => {
@@ -90,11 +86,47 @@ export function useHandler(
9086
e.preventDefault()
9187
}
9288

89+
const leaveDragBlockEvent = (e: Event|any) => {
90+
tmpLeaveDragEvent = e
91+
}
92+
93+
const enterDragBlockEvent = () => {
94+
tmpLeaveDragEvent = null
95+
}
96+
97+
const leaveUpEvent = (_: Event|any) => {
98+
if(!tmpLeaveDragEvent) {
99+
return
100+
}
101+
102+
upEvent(tmpLeaveDragEvent)
103+
clearEvent()
104+
}
105+
106+
const clearEvent = () => {
107+
dragBarRef.value.removeEventListener("mousemove", moveEvent, false)
108+
dragBarRef.value.removeEventListener("touchmove", moveEvent, { passive: false })
109+
110+
dragBarRef.value.removeEventListener( "mouseup", upEvent, false)
111+
// dragBarRef.value.removeEventListener( "mouseout", upEvent, false)
112+
dragBarRef.value.removeEventListener( "mouseenter", enterDragBlockEvent, false)
113+
dragBarRef.value.removeEventListener( "mouseleave", leaveDragBlockEvent, false)
114+
dragBarRef.value.removeEventListener("touchend", upEvent, false)
115+
116+
document.body.removeEventListener("mouseleave", upEvent, false)
117+
document.body.removeEventListener("mouseup", leaveUpEvent, false)
118+
}
119+
93120
dragBarRef.value.addEventListener("mousemove", moveEvent, false)
94121
dragBarRef.value.addEventListener("touchmove", moveEvent, { passive: false })
95122
dragBarRef.value.addEventListener( "mouseup", upEvent, false)
96-
dragBarRef.value.addEventListener( "mouseout", upEvent, false)
123+
// dragBarRef.value.addEventListener( "mouseout", upEvent, false)
124+
dragBarRef.value.addEventListener( "mouseenter", enterDragBlockEvent, false)
125+
dragBarRef.value.addEventListener( "mouseleave", leaveDragBlockEvent, false)
97126
dragBarRef.value.addEventListener("touchend", upEvent, false)
127+
128+
document.body.addEventListener("mouseleave", upEvent, false)
129+
document.body.addEventListener("mouseup", leaveUpEvent, false)
98130
}
99131

100132
const closeEvent = (e: Event|any) => {

‎packages/components/rotate/index.vue‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,12 @@
2626
</div>
2727
</div>
2828
<div class="gc-footer">
29-
<div class="gc-drag-slide-bar" ref="dragBarRef" @mousedown="handler.dragEvent">
29+
<div class="gc-drag-slide-bar" ref="dragBarRef">
3030
<div class="gc-drag-line" />
31-
<div class="gc-drag-block" ref="dragBlockRef" @touchstart="handler.dragEvent" :style="{left: handler.state.dragLeft + 'px'}">
32-
<arrows-icon />
31+
<div class="gc-drag-block" ref="dragBlockRef" @mousedown="handler.dragEvent" :style="{left: handler.state.dragLeft + 'px'}">
32+
<div class="drag-block-inline" @touchstart="handler.dragEvent">
33+
<arrows-icon />
34+
</div>
3335
</div>
3436
</div>
3537
</div>

‎packages/components/slide-region/hooks/handler.ts‎

Lines changed: 38 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export function useHandler(
2828
const maxHeight = height - tileHeight
2929

3030
let isMoving = false
31+
let tmpLeaveDragEvent: Event|any = null
3132
let startX = 0
3233
let startY = 0
3334
let tileLeft = 0
@@ -89,13 +90,7 @@ export function useHandler(
8990
return
9091
}
9192
isMoving = false
92-
93-
containerRef.value.removeEventListener("mousemove", moveEvent, false)
94-
containerRef.value.removeEventListener("touchmove", moveEvent, { passive: false })
95-
96-
containerRef.value.removeEventListener( "mouseup", upEvent, false)
97-
containerRef.value.removeEventListener( "mouseout", upEvent, false)
98-
containerRef.value.removeEventListener("touchend", upEvent, false)
93+
clearEvent()
9994

10095
event.confirm && event.confirm({x: tileLeft, y: tileTop}, () => {
10196
clear()
@@ -105,11 +100,46 @@ export function useHandler(
105100
e.preventDefault()
106101
}
107102

103+
const leaveDragBlockEvent = (e: Event|any) => {
104+
tmpLeaveDragEvent = e
105+
}
106+
107+
const enterDragBlockEvent = () => {
108+
tmpLeaveDragEvent = null
109+
}
110+
111+
const leaveUpEvent = (_: Event|any) => {
112+
if(!tmpLeaveDragEvent) {
113+
return
114+
}
115+
116+
upEvent(tmpLeaveDragEvent)
117+
clearEvent()
118+
}
119+
120+
const clearEvent = () => {
121+
containerRef.value.removeEventListener("mousemove", moveEvent, false)
122+
containerRef.value.removeEventListener("touchmove", moveEvent, { passive: false })
123+
containerRef.value.removeEventListener( "mouseup", upEvent, false)
124+
// containerRef.value.removeEventListener( "mouseout", upEvent, false)
125+
containerRef.value.removeEventListener( "mouseenter", enterDragBlockEvent, false)
126+
containerRef.value.removeEventListener( "mouseleave", leaveDragBlockEvent, false)
127+
containerRef.value.removeEventListener("touchend", upEvent, false)
128+
129+
document.body.removeEventListener("mouseleave", upEvent, false)
130+
document.body.removeEventListener("mouseup", leaveUpEvent, false)
131+
}
132+
108133
containerRef.value.addEventListener("mousemove", moveEvent, false)
109134
containerRef.value.addEventListener("touchmove", moveEvent, { passive: false })
110135
containerRef.value.addEventListener( "mouseup", upEvent, false)
111-
containerRef.value.addEventListener( "mouseout", upEvent, false)
136+
// containerRef.value.addEventListener( "mouseout", upEvent, false)
137+
containerRef.value.addEventListener( "mouseenter", enterDragBlockEvent, false)
138+
containerRef.value.addEventListener( "mouseleave", leaveDragBlockEvent, false)
112139
containerRef.value.addEventListener("touchend", upEvent, false)
140+
141+
document.body.addEventListener("mouseleave", upEvent, false)
142+
document.body.addEventListener("mouseup", leaveUpEvent, false)
113143
}
114144

115145
const closeEvent = (e: Event|any) => {

‎packages/components/slide/hooks/handler.ts‎

Lines changed: 39 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export function useHandler(
3131
const ratio = ((maxWidth - thumbX) + ad) / maxWidth
3232

3333
let isMoving = false
34+
let tmpLeaveDragEvent: Event|any = null
3435
let startX = 0
3536
let currentThumbX = 0
3637
if (touch) {
@@ -79,14 +80,8 @@ export function useHandler(
7980
return
8081
}
8182

82-
dragBarRef.value.removeEventListener("mousemove", moveEvent, false)
83-
dragBarRef.value.removeEventListener("touchmove", moveEvent, { passive: false })
84-
85-
dragBarRef.value.removeEventListener( "mouseup", upEvent, false)
86-
dragBarRef.value.removeEventListener( "mouseout", upEvent, false)
87-
dragBarRef.value.removeEventListener("touchend", upEvent, false)
88-
8983
isMoving = false
84+
clearEvent()
9085
event.confirm && event.confirm({x: parseInt(currentThumbX.toString()), y: data.thumbY || 0}, () => {
9186
clear()
9287
})
@@ -95,11 +90,47 @@ export function useHandler(
9590
e.preventDefault()
9691
}
9792

93+
const leaveDragBlockEvent = (e: Event|any) => {
94+
tmpLeaveDragEvent = e
95+
}
96+
97+
const enterDragBlockEvent = () => {
98+
tmpLeaveDragEvent = null
99+
}
100+
101+
const leaveUpEvent = (_: Event|any) => {
102+
if(!tmpLeaveDragEvent) {
103+
return
104+
}
105+
106+
upEvent(tmpLeaveDragEvent)
107+
clearEvent()
108+
}
109+
110+
const clearEvent = () => {
111+
dragBarRef.value.removeEventListener("mousemove", moveEvent, false)
112+
dragBarRef.value.removeEventListener("touchmove", moveEvent, { passive: false })
113+
114+
dragBarRef.value.removeEventListener( "mouseup", upEvent, false)
115+
// dragBarRef.value.removeEventListener( "mouseout", upEvent, false)
116+
dragBarRef.value.removeEventListener( "mouseenter", enterDragBlockEvent, false)
117+
dragBarRef.value.removeEventListener( "mouseleave", leaveDragBlockEvent, false)
118+
dragBarRef.value.removeEventListener("touchend", upEvent, false)
119+
120+
document.body.removeEventListener("mouseleave", upEvent, false)
121+
document.body.removeEventListener("mouseup", leaveUpEvent, false)
122+
}
123+
98124
dragBarRef.value.addEventListener("mousemove", moveEvent, false)
99125
dragBarRef.value.addEventListener("touchmove", moveEvent, { passive: false })
100126
dragBarRef.value.addEventListener( "mouseup", upEvent, false)
101-
dragBarRef.value.addEventListener( "mouseout", upEvent, false)
127+
// dragBarRef.value.addEventListener( "mouseout", upEvent, false)
128+
dragBarRef.value.addEventListener( "mouseenter", enterDragBlockEvent, false)
129+
dragBarRef.value.addEventListener( "mouseleave", leaveDragBlockEvent, false)
102130
dragBarRef.value.addEventListener("touchend", upEvent, false)
131+
132+
document.body.addEventListener("mouseleave", upEvent, false)
133+
document.body.addEventListener("mouseup", leaveUpEvent, false)
103134
}
104135

105136
const closeEvent = (e: Event|any) => {

‎packages/components/slide/index.vue‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,12 @@
2020
</div>
2121
</div>
2222
<div class="gc-footer">
23-
<div class="gc-drag-slide-bar" ref="dragBarRef" @mousedown="handler.dragEvent">
23+
<div class="gc-drag-slide-bar" ref="dragBarRef">
2424
<div class="gc-drag-line" />
25-
<div class="gc-drag-block" ref="dragBlockRef" @touchstart="handler.dragEvent" :style="{left: handler.state.dragLeft + 'px'}">
26-
<arrows-icon />
25+
<div class="gc-drag-block" ref="dragBlockRef" @mousedown="handler.dragEvent" :style="{left: handler.state.dragLeft + 'px'}">
26+
<div class="drag-block-inline" @touchstart="handler.dragEvent">
27+
<arrows-icon />
28+
</div>
2729
</div>
2830
</div>
2931
</div>

‎packages/gocaptcha.less‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -259,4 +259,12 @@
259259
color: var(--go-captcha-theme-drag-icon-color);
260260
fill: var(--go-captcha-theme-drag-icon-color);
261261
}
262+
263+
.drag-block-inline {
264+
width: 100%;
265+
height: 100%;
266+
display: flex;
267+
align-items: center;
268+
justify-content: center;
269+
}
262270
}

0 commit comments

Comments
 (0)