vuedraggable水平拖动

要实现vuedraggable水平拖动，可以使用以下代码片段作为参考：

<template>
  <draggable v-model="listdata" axis="x" class="draggable_ul">
    <li v-for="(item, index) in listdata" :key="(item || {}).id" class="draggable_li">
      <span>{{ index }}. </span>
      <span>{{ (item || {}).name }}</span>
    </li>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      listdata: [
        {id: '1001', name: 'item1'},
        {id: '1002', name: 'item2'},
        {id: '1003', name: 'item3'},
        {id: '1004', name: 'item4'},
      ],
    };
  },
};
</script>

在这个例子中，我们在`draggable`组件上增加了`axis="x"`属性，来指定只能水平拖动。这样，`listdata`中的数据将可以通过水平拖动进行重新排序。注意，你需要根据自己的需求修改模板中的类名，以及样式文件中的对应类名，以保证正确的显示效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [拖动(拖拽)功能 vuedraggable or react-sortable-hoc](https://blog.csdn.net/ssoutlook/article/details/120076817)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]