| ... | @@ -46,6 +46,8 @@ export default { |
... | @@ -46,6 +46,8 @@ export default { |
|
|
window.removeEventListener('resize', this.resizeThrottled, false);
|
|
window.removeEventListener('resize', this.resizeThrottled, false);
|
|
|
document.body.removeEventListener('mouseup', this.stopDrag);
|
|
document.body.removeEventListener('mouseup', this.stopDrag);
|
|
|
document.body.removeEventListener('mousemove', this.dragMove);
|
|
document.body.removeEventListener('mousemove', this.dragMove);
|
|
|
|
document.body.removeEventListener('touchend', this.stopDrag);
|
|
|
|
document.body.removeEventListener('touchmove', this.dragMove);
|
|
|
},
|
|
},
|
|
|
mounted() {
|
|
mounted() {
|
|
|
window.addEventListener('resize', this.resize, false);
|
|
window.addEventListener('resize', this.resize, false);
|
| ... | @@ -54,7 +56,8 @@ export default { |
... | @@ -54,7 +56,8 @@ export default { |
|
|
dragMove(e) {
|
|
dragMove(e) {
|
|
|
if (!this.dragging) return;
|
|
if (!this.dragging) return;
|
|
|
|
|
|
|
|
let leftValue = e.pageX - this.$refs.swipeFrame.getBoundingClientRect().left;
|
|
const moveX = e.pageX || e.touches[0].pageX;
|
|
|
|
let leftValue = moveX - this.$refs.swipeFrame.getBoundingClientRect().left;
|
|
|
const spaceLeft = 20;
|
|
const spaceLeft = 20;
|
|
|
const { clientWidth } = this.$refs.swipeFrame;
|
|
const { clientWidth } = this.$refs.swipeFrame;
|
|
|
if (leftValue <= 0) {
|
|
if (leftValue <= 0) {
|
| ... | @@ -69,10 +72,12 @@ export default { |
... | @@ -69,10 +72,12 @@ export default { |
|
|
startDrag() {
|
|
startDrag() {
|
|
|
this.dragging = true;
|
|
this.dragging = true;
|
|
|
document.body.addEventListener('mousemove', this.dragMove);
|
|
document.body.addEventListener('mousemove', this.dragMove);
|
|
|
|
document.body.addEventListener('touchmove', this.dragMove);
|
|
|
},
|
|
},
|
|
|
stopDrag() {
|
|
stopDrag() {
|
|
|
this.dragging = false;
|
|
this.dragging = false;
|
|
|
document.body.removeEventListener('mousemove', this.dragMove);
|
|
document.body.removeEventListener('mousemove', this.dragMove);
|
|
|
|
document.body.removeEventListener('touchmove', this.dragMove);
|
|
|
},
|
|
},
|
|
|
prepareSwipe() {
|
|
prepareSwipe() {
|
|
|
if (this.swipeOldImgInfo && this.swipeNewImgInfo) {
|
|
if (this.swipeOldImgInfo && this.swipeNewImgInfo) {
|
| ... | @@ -83,6 +88,7 @@ export default { |
... | @@ -83,6 +88,7 @@ export default { |
|
|
Math.max(this.swipeOldImgInfo.renderedHeight, this.swipeNewImgInfo.renderedHeight) + 2;
|
|
Math.max(this.swipeOldImgInfo.renderedHeight, this.swipeNewImgInfo.renderedHeight) + 2;
|
|
|
|
|
|
|
|
document.body.addEventListener('mouseup', this.stopDrag);
|
|
document.body.addEventListener('mouseup', this.stopDrag);
|
|
|
|
document.body.addEventListener('touchend', this.stopDrag);
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
swipeNewImgLoaded(imgInfo) {
|
|
swipeNewImgLoaded(imgInfo) {
|
| ... | @@ -143,6 +149,8 @@ export default { |
... | @@ -143,6 +149,8 @@ export default { |
|
|
class="swipe-bar"
|
|
class="swipe-bar"
|
|
|
@mousedown="startDrag"
|
|
@mousedown="startDrag"
|
|
|
@mouseup="stopDrag"
|
|
@mouseup="stopDrag"
|
|
|
|
@touchstart="startDrag"
|
|
|
|
@touchend="stopDrag"
|
|
|
>
|
|
>
|
|
|
<span class="top-handle"></span> <span class="bottom-handle"></span>
|
|
<span class="top-handle"></span> <span class="bottom-handle"></span>
|
|
|
</span>
|
|
</span>
|
| ... | |
... | |
| ... | | ... | |