vue左右滑动切换图片,vue图片滚动
本文主要详细介绍了图像拖动和排序的vue实现。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享了vue对图片进行拖动和排序的具体代码，供大家参考。具体内容如下
原理：有一个图片列表，拖动其中一个(触发dragstart)，当拖动的图片移动到其他图片的位置时(触发dragover)，将拖动的图片从原来的位置移动到这个位置(触发dragend)。
dragstart：当用户开始拖动元素或选定的文本时，将触发dragstart事件。
dragover：当一个元素或选定的文本被拖动到一个有效的拖放目标时，dragover事件被触发(每隔几百毫秒触发一次)。
dragend：拖放操作结束时触发拖放事件。(我们这里不一定要用)
（1）图片列表HTML结构。将属性draggable添加到要拖动的元素中。这里注意：loop的模板的键值需要是唯一的，因为vue会在渲染时就地重用它。如果键值是唯一的，那么重新排序后呈现的列表节点将不会被重用，这样可以避免一些问题。(当我们插入时，我们会根据序号将一些数据插入到数组中)
ul class=拖动容器
@dragstart=onDragStart
@dragover=onDragOver
@dragend=onDragEnd
ref=imgList
里
列表中的v-for=(item，idx)
:key=item.path
class=拖动列表
draggable=true
img :src=item.path alt= /
/李
/ul
（2）事件: dragstart，onDragStart上的dragover绑定事件，onDragOver
OnDragStart:标识需要拖动的元素，并保存在拖动过程中dragover的绑定事件的状态中。
onDragStart(事件){
console . log(“start”)；
this . draging=event . target；
},
OnDragOver:在拖动过程中，当它位于有效目标上，并且目标元素(而不是被拖动的元素)被识别时，该事件被触发。首先，识别目标元素是否是我们需要的目标元素。先判断是否是li元素，判断图片是否和拖动的一样，然后插入拖动的元素。
识别拖动元素和目标元素的位置序号，在目标元素前插入拖动元素，然后删除拖动元素原始位置的数据。在vue中，你只需要操作数据。
onDragOver(事件){
console.log(拖动移动)
event . prevent default()；
let target=event.target
//因为dragover会发生在ul上，所以需要判断是不是李
if (target.nodeName===LI
target.childNodes[0]。src！==this.draging.childNodes[0]。src) {
设idx_drag=this。_index(this.draging)
设idx_target=this。_索引(目标)
let _list=this.list
let _drag=this.list[idx_drag]
if(idx_dragidx_target){
_list.splice(idx_target，0，_ list[idx _ drag])；
_list.splice(idx_drag 1，1)
}否则{
_list.splice(idx_target 1，0，_ list[idx _ drag])；
_list.splice(idx_drag，1)
}
console.log(_list[0])。路径)
这个。$emit(change ，_list)
}
},
完整的代码如下：
模板
div class= image-list v-if= list list . length
ul class=拖动容器
@dragstart=onDragStart
@dragover=onDragOver
@dragend=onDragEnd
ref=imgList
里
列表中的v-for=(item，idx)
:key=item.path
class=拖动列表
draggable=true
img :src=item.path alt= /
/李
/ul
/div
/模板
脚本
导出默认值{
名称：拖动图像列表，
道具：{
列表：数组，
},
data(){
返回{
拖动：null，//被拖拽的对象
}
},
方法：{
onDragStart(事件){
控制台。log(" start ")；
这个。拖动=事件。目标；
},
翁德拉戈弗(事件){
console.log(拖动移动)
事件。防止默认()；
让目标=事件.目标
//因为德拉戈夫会发生在保险商实验所上，所以要判断是不是里
如果(目标。nodename=== LI 目标。子节点[0].src！==this.draging.childNodes[0].src) {
设idx_drag=this ._index(this.draging)
设idx_target=this ._索引（目标)
let _list=this.list
let _drag=this.list[idx_drag]
if(idx_dragidx_target){
_list.splice(idx_target，0，_ list[idx _ drag])；
_list.splice(idx_drag 1，1)
}否则{
_list.splice(idx_target 1，0，_ list[idx _ drag])；
_list.splice(idx_drag，1)
}
console.log(_list[0]).路径)
}
},
翁德拉根德(事件){
console.log(结束事件)
},
_index(el){
定义变量指数=0;
如果(!el ！el.parentNode) {
return-1；
}
while(El(El=El。previouselementsibling)){
指数；
}
回报指数；
},
}
}
/脚本
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。