起步 东西确实是好东西，奈何一开始文档没捋清，费了一番时间好好琢磨了一下。

<draggable

v-model="myArray"
group="people"
@start="drag=true"
@end="drag=false"
:move="move"
handle=".handle"
tag="ul"
item-key="id">

<template #header>

<li class="add">
  <van-icon name="plus" size="18"/>  添加标签
</li>

</template> <template #item=“{element}”>

<li>
  <div>{{element.name}}</div>
  <div class="icon">
    <van-icon :name="ban"/>
    <van-icon class="handle" style="margin-left: 20px;" :name="exchange"/>
  </div>
</li>

</template> <template #footer>

<li class="add">
  <van-icon name="plus" size="18"/>  添加标签
</li>

</template> </draggable>

1.配置说明

v-modal，绑定数据源。 item-key，指定作为key的键名。 tag，指定外部标签名。 handle，指定#item内，触发拖动的选择器。 move，移动过程中触发的函数。 ghostClass，拖动时下方元素添加的类。 dragClass，拖动元素添加的类 selectedClass，选中元素的类。 #item，内容区域的插槽，参数{element，index} #header，#footer，顶部和底部不触发拖动的区域元素 各种方法

2.使用记录 使用forceFallback: true 将强制拖动时不使用h5 的dragable接口。

当使用forceFallback时，指定拖动元素fallbackClass的样式类。

fallbackOnBody: false, 用于指定是否将append的元素添加到body下面，不指定时，将复制到被拖动元素的同一层级

阅读剩余 0%
本站所有文章资讯、展示的图片素材等内容均为注册用户上传(部分报媒/平媒内容转载自网络合作媒体)，仅供学习参考。 用户通过本站上传、发布的任何内容的知识产权归属用户或原始著作权人所有。如有侵犯您的版权，请联系我们反馈本站将在三个工作日内改正。