实现div框内img图片拖拽自由(使用ondragstart/ondragover/ondragend实现功能)
场景:图片列表展示(单个展示同理这里用循环展示)
<div v-for="(value, index) in checkData" :key="index" :id="value.fileId" class="imgPar">
<img
draggable="true"
:src="value.fileUrl"
@dragstart="dragstart(value)"
@dragover="dragover(value)"
@dragend="dragend(value)"
@load="setImgHeight($event, index)"
>
</div>
在上述代码中,首先我们定义了一个可以拖动的图片。图片的draggable="true"
属性表示它是可以拖动的。
当开始拖动图片时,ondragstart(@
dragstart)
事件会被触发,然后执行dragstart(value)函数。 拖动结束时,ondragend(@
dragend)
事件会被触发,然后执行dragend(value)函数。
dragstart
和dragend
事件中处理了拖拽逻辑,但是没有在鼠标移动的过程中更新图片的位置,这就是为什么图片会直接跳到最后的位置,而不是跟随鼠标移动。
添加一个dragover
事件处理器,在这个处理器中,实时地更新了图片的位置。这样,图片就可以跟随鼠标的移动而移动了。
data() {
return {
imgHeights: [],
}
},
// 拖拽开始
dragstart(value) {
var img = document.getElementById(value.fileId).firstChild
this.offsetX = event.clientX - img.offsetLeft
this.offsetY = event.clientY - img.offsetTop
},
// 次函数可以不用
dragover(value) {
event.preventDefault()
var img = document.getElementById(value.fileId).firstChild
var x = event.clientX - this.offsetX
var y = event.clientY - this.offsetY
img.style.left = x + 'px'
img.style.top = y + 'px'
},
// 拖拽结束
dragend(value) {
var img = document.getElementById(value.fileId).firstChild
var imgContainer = document.getElementById(value.fileId)
var x = event.clientX - this.offsetX
var y = event.clientY - this.offsetY
x = Math.max(0, Math.min(x, imgContainer.offsetWidth - img.offsetWidth))
y = Math.max(0, Math.min(y, imgContainer.offsetHeight - img.offsetHeight))
img.style.left = x + 'px'
img.style.top = y + 'px'
},
// 获取图片的高度保存
setImgHeight(event, index) {
this.$set(this.imgHeights, index, event.target.offsetHeight)
},
这里为了动态控制每个div的高度,可以通过绑定style
属性来动态地设置一个元素的样式。如果你想让div
的高度动态地获取图片的高度,你需要首先在你的数据中保存这个高度,然后在style
属性中使用这个高度。你可以在img
元素的load
事件中获取图片的高度,然后保存到你的数据中。
<div :style="{ height: imgHeights[index] + 'px' }">
<img>
</div>
.imgPar {
border: 1px solid #ccc;
margin: 0 auto;
overflow: hidden;
overflow-x: auto;
position: relative;
// height: auto;
img {
margin: auto;
display: block;
width: 30%;
position: absolute;
left: 50%;
transform:translateX(-50%)
}
}