| ... | ... | @@ -40,12 +40,15 @@ export default { |
|
|
|
},
|
|
|
|
beforeDestroy() {
|
|
|
|
document.body.removeEventListener('mouseup', this.stopDrag);
|
|
|
|
this.$refs.dragger.removeEventListener('mousedown', this.startDrag);
|
|
|
|
document.body.removeEventListener('touchend', this.stopDrag);
|
|
|
|
document.body.removeEventListener('mousemove', this.dragMove);
|
|
|
|
document.body.removeEventListener('touchmove', this.dragMove);
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
dragMove(e) {
|
|
|
|
if (!this.dragging) return;
|
|
|
|
const left = e.pageX - this.$refs.dragTrack.getBoundingClientRect().left;
|
|
|
|
const moveX = e.pageX || e.touches[0].pageX;
|
|
|
|
const left = moveX - this.$refs.dragTrack.getBoundingClientRect().left;
|
|
|
|
const dragTrackWidth =
|
|
|
|
this.$refs.dragTrack.clientWidth - this.$refs.dragger.clientWidth || 100;
|
|
|
|
|
| ... | ... | @@ -60,11 +63,13 @@ export default { |
|
|
|
this.dragging = true;
|
|
|
|
document.body.style.userSelect = 'none';
|
|
|
|
document.body.addEventListener('mousemove', this.dragMove);
|
|
|
|
document.body.addEventListener('touchmove', this.dragMove);
|
|
|
|
},
|
|
|
|
stopDrag() {
|
|
|
|
this.dragging = false;
|
|
|
|
document.body.style.userSelect = '';
|
|
|
|
document.body.removeEventListener('mousemove', this.dragMove);
|
|
|
|
document.body.removeEventListener('touchmove', this.dragMove);
|
|
|
|
},
|
|
|
|
prepareOnionSkin() {
|
|
|
|
if (this.onionOldImgInfo && this.onionNewImgInfo) {
|
| ... | ... | @@ -82,6 +87,7 @@ export default { |
|
|
|
this.$refs.dragTrack.clientWidth - this.$refs.dragger.clientWidth || 100;
|
|
|
|
|
|
|
|
document.body.addEventListener('mouseup', this.stopDrag);
|
|
|
|
document.body.addEventListener('touchend', this.stopDrag);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
onionNewImgLoaded(imgInfo) {
|
| ... | ... | @@ -140,7 +146,14 @@ export default { |
|
|
|
</div>
|
|
|
|
<div class="controls">
|
|
|
|
<div class="transparent"></div>
|
|
|
|
<div ref="dragTrack" class="drag-track" @mousedown="startDrag" @mouseup="stopDrag">
|
|
|
|
<div
|
|
|
|
ref="dragTrack"
|
|
|
|
class="drag-track"
|
|
|
|
@mousedown="startDrag"
|
|
|
|
@mouseup="stopDrag"
|
|
|
|
@touchstart="startDrag"
|
|
|
|
@touchend="stopDrag"
|
|
|
|
>
|
|
|
|
<div ref="dragger" :style="{ left: onionDraggerPixelPos }" class="dragger"></div>
|
|
|
|
</div>
|
|
|
|
<div class="opaque"></div>
|
| ... | ... | |
| ... | ... | |