vuedraggable nuxt
时间: 2023-09-13 18:09:23 浏览: 56
VueDraggable是一个基于Vue.js的可拖拽组件,它提供了拖拽和排序功能。Nuxt.js是一个基于Vue.js的通用应用框架,它通过在Vue.js上提供更多的功能和约定来简化应用程序的开发过程。在Nuxt.js中使用VueDraggable的步骤如下:
1. 首先,在所需的页面中引入VueDraggable组件。这可以通过import语句实现,例如`import draggable from "vuedraggable";`。
2. 然后,在模板布局中使用`<draggable>`标签来包裹需要拖拽和排序功能的内容列表。可以使用`v-model`指令将数据与组件进行绑定,通过`v-for`指令遍历数据生成列表项。例如:
```html
<draggable v-model="articleLists" class="dragItem_group" group="site" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
<transition-group>
<div class="article-li-card-div" :class="item.isChecked == true ? 'select_border' : ''" v-for="item in articleLists" :key="item.articleId">
// 内容列表部分
</div>
</transition-group>
</draggable>
```<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [nuxt.js+vuedraggable实现拖拽效果](https://blog.csdn.net/qq_50594742/article/details/125344405)[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_1"}}] [.reference_item style="max-width: 50%"]
- *3* [nuxt.js + vuedraggable 拖拽效果](https://blog.csdn.net/qq_46570160/article/details/125344112)[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_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)