sortable获取拖拽后的数据_Vue.Draggable - 基于 Vue.js 丝般柔滑的拖拽排序组件
时间: 2024-03-21 18:39:44 浏览: 19
好的,您的问题是如何使用 Vue.Draggable 组件获取拖拽后的数据?
使用 Vue.Draggable 组件可以轻松地实现拖拽排序功能。要获取拖拽后的数据,可以使用该组件的 change 事件。
以下是示例代码:
```
<draggable v-model="list" @change="handleChange">
<div v-for="item in list" :key="item.id">{{ item.name }}</div>
</draggable>
```
在上述代码中,我们绑定了一个数组 list 到 draggable 组件的 v-model 上。同时,我们监听了 change 事件,并将其绑定到一个名为 handleChange 的方法上。
接下来,我们需要在组件的 methods 中定义 handleChange 方法:
```
methods: {
handleChange(event) {
console.log(event);
}
}
```
在 handleChange 方法中,我们可以打印出 event 对象,它包含了拖拽前后的数据。您可以根据需要对 event 对象进行处理,从而获取拖拽后的数据。
希望这个回答能够帮到您!
相关问题
vue.draggable.next
vue.draggable.next是一个基于Sortable.js实现的Vue 3拖拽插件。它可以用于拖拽列表、菜单、工作台、选项卡等常见的工作场景。通过安装插件,并引入VueDraggableNext组件,你可以在Vue 3项目中使用这个插件来实现可拖拽的列表功能。这个插件在开发过程中被认为是优雅、简洁且易于使用的。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Vue3拖拽插件Vue.Draggable.next](https://blog.csdn.net/m0_46627407/article/details/125624211)[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 ]
vue.draggable 滚动条
Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。它支持移动设备、拖拽和选择文本、智能滚动,并且可以在不同列表间进行拖拽操作。该插件不依赖于jQuery,而且还兼容vue 2的过渡动画。通过设置animation属性,你可以为vue.draggable添加过渡效果,使得拖动时元素位置的过渡变得更加平滑。
在使用vue.draggable时,你可以通过设置scroll属性来控制是否允许拖拽时滚动条的出现。如果将scroll属性设置为true,那么在拖拽元素接近滚动区域时,滚动条会自动出现,从而方便你在长列表中进行拖拽操作。另外,你还可以通过设置scrollFn属性来定义滚动时的回调函数,scrollSensitivity属性来设置拖拽元素与滚动区域的距离阈值,以及scrollSpeed属性来设置滚动速度。