提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

SortableJS / vue.draggable.next 使用笔记，持续记录

笔记
2023-03-07 09:43:41 时间

起步

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

Github：https://github.com/SortableJS/vue.draggable.next，完整代码如下：

<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"/>&nbsp; 添加标签
    </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"/>&nbsp; 添加标签
    </li>
  </template>
</draggable>

1.配置说明

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

完整参数说明：https://github.com/SortableJS/Sortable#options

2.使用记录

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

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

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

相关文章