Добрый день) У меня следующий вопрос. В блоке есть картинка, которая больше размеров блока, при передвижении картинки необходимо, чтобы границы картинки совпадали с границей блока и не появлялось пустых остступов.
Чтобы при прокрутке картинки она останавливалась до определенной границы. Не пойму как точно сделать это используя vue
Код следующий
<template lang="pug">
div
div(
ref="border1"
class="main-border"
@mousedown="mousedown($event)"
@mousemove="moveAt"
@mouseup="mouseup"
)
img(
ref="map"
src="https://unsplash.it/500/300/?random&1"
)
</template>
<script>
export default {
name: 'Test',
data() {
return {
left: 0,
tp: 0,
x: '',
y: '',
dragging: false
}
},
methods: {
mousedown (event) {
event.preventDefault()
this.x = event.pageX
this.y = event.pageY
this.dragging = true
this.moveAt(event)
},
moveAt (event) {
if (this.dragging) {
let block = this.$refs.map
block.style.left = (this.left + event.pageX - this.x) + 'px'
block.style.top = (this.tp + event.pageY - this.y) + 'px'
}
},
mouseup () {
this.dragging = false
let block = this.$refs.map
this.left = parseFloat(block.style.left)
this.tp = parseFloat(block.style.top)
}
}
}
</script>
<style scoped lang="less">
.main-border {
margin: auto;
overflow: hidden;
width: 500px;
height: 300px;
border: 1px solid #663333;
position: relative;
}
.main-border img{
height: auto;
width: 200%;
position: absolute;
left: 0;
top: 0;
}
</style>
Простой
