大家好，我是你的好朋友思创斯。今天说一说sortablejs/vue.draggable「建议收藏」,希望您对编程的造诣更进一步.
vue 组件 (vue.js 2.0) 或指令 (vue.js 1.0) 允许拖放和与视图模型数组同步。
基于并提供
对于 vue 3
见
演示
现场演示
特征
- 完全支持功能：
- 支持触控设备
- 支持拖动手柄和可选文本
- 智能自动滚动
- 支持不同列表之间的拖放
- 没有 jquery 依赖
- 保持同步 html 和查看模型列表
- 兼容 vue.js 2.0 转换组（过渡动画）
- 支持撤销操作
- 需要完全控制时报告任何更改的事件
- 重用现有的 ui 库组件（如、或等）并使用
tag和componentdataprops使它们可拖动
安装
使用 npm 或yarn
yarn add vuedraggable
npm i -s vuedraggable是否还在为ide开发工具频繁失效而烦恼，来吧关注以下公众号获取最新激活方式。亲测可用！
【正版授权，激活自己账号】：
【官方授权 正版激活】：
注意它对于 vue 2.0 是 vuedraggable 而不是对于 1.0 版的 vue-draggable
with direct link
对于 vue.js 2.0
使用可拖动组件：
典型用途：
{
{element.name}}
.vue 文件：
import draggable from 'vuedraggable'
...
export default {
components: {
draggable,
},
...与transition-group：
{
{element.name}}
可拖动组件应该直接包装可拖动元素，或者transition-component包含可拖动元素。
with footer slot:
{
{element.name}}
with header slot:
{
{element.name}}
使用 vuex：
computed: {
mylist: {
get() {
return this.$store.state.mylist
},
set(value) {
this.$store.commit('updatelist', value)
}
}
}props
value
type: array
required: false
default: null
可拖动组件的输入数组。通常与内部元素 v-for 指令引用的数组相同。这是使用 vue.draggable 的首选方式，因为它与 vuex 兼容。它不应该直接使用，但只能通过v-model指令：
list
类型：array
必填：false
默认值：null
替代value属性，列表是一个与拖放同步的数组。主要区别在于list属性是由可拖动组件使用 splice 方法更新的，而value属性是不可变的。不要与 value prop 一起使用。
所有可排序的选项
2.19 版中的新功能
从 2.19 版本开始，可排序选项可以直接设置为 vue.draggable 属性。
这意味着所有都是有效的可排序属性，但所有以“on”开头的方法除外，因为可拖动组件通过事件公开相同的 api。
支持 kebab-case 属性：例如ghost-class属性 将转换为ghostclass可排序选项。
设置句柄、可排序和组选项的示例：
tag
类型：string
默认值：'div'
可拖动组件创建为包含插槽的外部元素的元素的 html 节点类型。也可以将 vue 组件的名称作为元素传递。在这种情况下，可拖动属性将被传递给创建组件。如果您需要为创建的组件设置道具或事件，另请参阅
clone
类型：function
必填：false
默认值：(original) => { return original;}
当克隆选项为真时，在源组件上调用函数以克隆元素。唯一的参数是要克隆的 viewmodel 元素，返回值是它的克隆版本。默认情况下 vue.draggable 重用 viewmodel 元素，所以如果你想克隆或深度克隆它，你必须使用这个钩子。
move
类型：function
必填：false
默认值：null
如果不为 null，则此函数将以与类似的方式调用。返回 false 将取消拖动操作。
function onmovecallback(evt, originalevent){
...
// return false; — for cancel
}相同的属性，以及 3 个附加属性：
draggedcontext: 链接到拖动元素的上下文index: 拖拽元素索引element: 拖拽元素底层视图模型元素futureindex：如果接受放置操作，则拖动元素的潜在索引
relatedcontext: 关联到当前拖动操作的上下文index: 目标元素索引element：目标元素视图模型元素list: 目标列表component: 目标 vuecomponent
html：
javascript:
checkmove: function(evt){
return (evt.draggedcontext.element.name!=='apple');
}查看完整示例： ,
componentdata
类型：object
必填：false
默认值：null
该 props 用于将附加信息传递给声明的子组件。
价值：
props：要传递给子组件的属性attrs: 传递给子组件的属性on：要在子组件中订阅的事件
示例（使用）：
{
{e.description}}
methods: {
handlechange() {
console.log('changed');
},
inputchanged(value) {
this.activenames = value;
},
getcomponentdata() {
return {
on: {
change: this.handlechange,
input: this.inputchanged
},
attrs:{
wrap: true
},
props: {
value: this.activenames
}
};
}
}events
-
支持可排序事件：
start,add,remove,update,end,choose,unchoose,sort,filter,clone
每当 onstart, onadd, onremove, onupdate, onend, onchoose, onunchoose, onsort, onclone 被 sortable.js 以相同的参数触发时，就会调用事件。请注意，sortablejs onmove 回调与
html：
-
更改事件
change当 list prop 不为 null 且对应的数组因拖放操作而改变时触发事件。
使用包含以下属性之一的参数调用此事件：added: 包含添加到数组中的元素的信息newindex: 添加元素的索引element: 添加的元素
removed：包含从数组中删除的元素的信息oldindex: 删除前元素的索引element: 移除的元素
moved：包含在数组中移动的元素的信息newindex: 被移动元素的当前索引oldindex: 被移动元素的旧索引element: 移动的元素
插槽
限制：页眉或页脚插槽都不能与转换组一起使用。
header
使用header插槽在 vuedraggable 组件内添加不可拖动元素。重要提示：它应该与可拖动选项一起使用来标记可拖动元素。请注意，无论其在模板中的位置如何，标题槽都将始终添加在默认槽之前。如：
{
{element.name}}
footer
使用footer插槽在 vuedraggable 组件内添加不可拖动元素。重要提示：它应该与可拖动选项一起使用来标记可拖动元素。请注意，无论其在模板中的位置，页脚插槽将始终添加在默认插槽之后。例如：
{
{element.name}}
gotchas
-
vue.draggable 子项应该始终使用 v-for 指令映射列表或值道具
- 您可以使用和插槽来绕过此限制。
-
v-for 中的子元素应该像 vue.js 中的任何元素一样被键入。请特别注意提供相关的关键值：
- 通常提供数组索引作为键不起作用，因为键应链接到项目内容
- 克隆的元素应该提供更新的键，例如使用
例子
完整的演示示例
文章由思创斯整理,转载请注明出处：https://ispacesoft.com/118899.html