VUE 拖拽组件 vue.draggable

中文文档

https://www.itxst.com/vue-draggable/tutorial.html

安装

npm i -S vuedraggable

属性

属性名称	说明
group	:group= “name”，相同的组之间可以相互拖拽
sort	:sort= “true”,是否开启内部排序,如果设置为false,它所在组无法排序，在其他组可以拖动排序
delay	:delay= “0”, 鼠标按下后多久可以拖拽
touchStartThreshold	鼠标移动多少px才能拖动元素
disabled	:disabled= “true”,是否启用拖拽组件
animation	拖动时的动画效果，还是很酷的,数字类型。如设置animation=1000表示1秒过渡动画效果
handle	:handle=“.mover” 只有当鼠标移动到css为mover类的元素上才能拖动
filter	:filter=“.unmover” 设置了unmover样式的元素不允许拖动
draggable	:draggable=“.item” 那些元素是可以被拖动的
ghostClass	:ghostClass=“ghostClass” 设置拖动元素的占位符类名,你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
chosenClass	:chosenClass=“hostClass” 被选中目标的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
dragClass	:dragClass="dragClass"拖动元素的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true
dataIdAttr	dataIdAttr: ‘data-id’
forceFallback	默认false，忽略HTML5的拖拽行为，因为h5里有个属性也是可以拖动，你要自定义ghostClass chosenClass dragClass样式时，建议forceFallback设置为true
fallbackClass	默认false，克隆的DOM元素的类名
allbackOnBody	默认false，克隆的元素添加到文档的body中
fallbackTolerance	拖拽之前应该移动的px
scroll	默认true,有滚动区域是否允许拖拽
scrollFn	滚动回调函数
scrollSensitivity	距离滚动区域多远时，滚动滚动条
scrollSpeed	滚动速度

引用

import draggable from "vuedraggable";
export default {components: {draggable}
}

案例

单列拖动

<template><div class="draggable"><!-- delay按下多少才能拖动，防止用户误操作，单位ms --><!-- animation 过渡的一个效果，不设置的话，体验效果是特别差的  --><!-- ghostClass="ghostClass 设置拖动元素的占位符类名--><!-- ghostClass="hostClass" 被选中目标的样式--><!-- dragClass="dragClass" --><draggable delay="1000" animation="1000" forceFallback="true" ghostClass="ghostClass" chosenClass="hostClass" dragClass="dragClass"><transition-group><div class="item" v-for="item in list" :key="item.id">{{item.name}}</div></transition-group></draggable></div>
</template>
<script>
//导入draggable组件
import draggable from "vuedraggable";
export default {//注册draggable组件components: {draggable,},data() {return {drag: false,//定义要被拖拽对象的数组list: [{ id: 1, name: "www.itxst.com" },{ id: 2, name: "www.jd.com" },{ id: 3, name: "www.ebay.com" },],};},methods: {//开始拖拽事件onStart() {this.drag = true;},//拖拽结束事件onEnd() {this.drag = false;},},
};
</script>
<style scoped>
.draggable{position: relative;width: 400px;height: 400px;border: 1px solid red;left: 50%;transform: translateX(-50%);
}
.item{box-sizing: border-box;width: 100%;padding: 7px;border: 1px solid #ccc;margin-bottom: 10px;cursor: pointer;
}
.ghostClass{border: 2px solid yellow !important;
}
.hostClass{background-color: pink !important;
}
.dragClass{font-size: 24px;
}
</style>

多列拖动

:group= “name”，相同的组之间可以相互拖拽 name最好是动态，在结合vue.draggable的事件可以实现更好的多列拖动效果

vue.draggable事件列表

事件名称	说明
start	开始拖动时触发的事件
add	从一个数组拖拽到另外一个数组时触发的事件
remove	移除事件
update	拖拽变换位置时触发的事件
end	拖拽完成时的事件
choose	鼠标点击选中要拖拽元素时的事件
unchoose	选中后松开鼠标的事件
sort	位置变化时的事件
clone	从一个数组拖拽到另外一个数组时触发的事件和add不同，clone是复制了数组元素

A、B列可以相互拖动，A、C列也可以相互拖动,B、C列无法拖动,且B列只能有一个元素

<template><div><div><span>A、B列可以相互拖动，A、C列也可以相互拖动,B、C列无法拖动,且B列只能有一个元素</span></div><div class="itxst"><div class="col"><div class="title">A列</div><!-- 设置固定宽高的原因在于如果没有元素的话高度为0是拖不进元素的 --><draggablev-model="arr1":group="name1"animation="300"dragClass="dragClass"ghostClass="ghostClass"chosenClass="chosenClass"@add="onadd"style="width: 100%; height: 80%;overflow-y: auto;"><div class="item" v-for="item in arr1" :key="item.id">{{ item.name }}</div></draggable></div><div class="col"><div class="title">B列</div><draggablev-model="arr2":group="name2"animation="300"dragClass="dragClass"ghostClass="ghostClass"chosenClass="chosenClass"@start="onStart"@add="onadd"style="width: 100%; height: 80%;overflow-y: auto;"><div class="item" v-for="item in arr2" :key="item.id">{{ item.name }}</div></draggable></div><div class="col"><div class="title">C列</div><draggablev-model="arr3":group="name3"animation="300"dragClass="dragClass"ghostClass="ghostClass"chosenClass="chosenClass"@add="onadd"style="width: 100%; height: 80%;overflow-y: auto;"><div class="item" v-for="item in arr3" :key="item.id">{{ item.name }}</div></draggable></div></div></div>
</template>
<script>
//导入draggable组件
import draggable from "vuedraggable";
export default {//注册draggable组件components: {draggable,},data() {return {name1:'a',name2:'a',name3:'a',//定义要被拖拽对象的数组arr1: [{ id: 1, name: "www.itxst.com" },{ id: 2, name: "www.jd.com" },{ id: 3, name: "www.baidu.com" },{ id: 4, name: "www.taobao.com" },{ id: 5, name: "www.itxst.com" },{ id: 6, name: "www.jd.com" },{ id: 7, name: "www.baidu.com" },{ id: 8, name: "www.taobao.com" },{ id: 9, name: "www.itxst.com" },{ id: 10, name: "www.jd.com" },{ id: 11, name: "www.baidu.com" },{ id: 12, name: "www.taobao.com" },],arr2: [],arr3: [],};},methods: {onadd() {if(this.arr2.length!= 0){this.name2 = 'b'}else{this.name2 = 'a'}},onStart(){this.name2 = 'a'}},
};
</script>
<style scoped>
/*定义要拖拽元素的样式*/
.ghostClass {background-color: blue !important;
}
.chosenClass {background-color: red !important;opacity: 1 !important;
}
.dragClass {background-color: blueviolet !important;opacity: 1 !important;box-shadow: none !important;outline: none !important;background-image: none !important;
}
.itxst {margin: 10px;
}
.title {padding: 6px 12px;
}
.col {width: 40%;height: 400px;flex: 1;padding: 10px;border: solid 1px #eee;border-radius: 5px;float: left;
}
.col + .col {margin-left: 10px;
}.item {padding: 6px 12px;margin: 0px 10px 0px 10px;border: solid 1px #eee;background-color: #f1f1f1;
}
.item:hover {background-color: #fdfdfd;cursor: move;
}
.item + .item {border-top: none;margin-top: 6px;
}
</style>

VUE 拖拽组件 vue.draggable相关推荐

Vue拖拽组件开发实例
为什么选择Vue? 主要原因:对于前端开发来说,兼容性是我们必须要考虑的问题之一.我们的项目不需要兼容低版本浏览器.项目本身也是一个数据驱动型的.加之,Vue本身具有以下主要特性: 使用虚拟DOM: ...
最好用的 6 款 Vue 拖拽组件库推荐 - 卡拉云
本文首发:<最好用的 6 款 Vue 拖拽组件库推荐 - 卡拉云> Vue 拖拽组件库(drag-and-drop)组件在使用 Vue 框架开发中非常常见的需求,做个内容行排序,拖拽小组件 ...
自己封装的vue拖拽组件
自己封装的vue拖拽组件使用Vue.Draggable实现 Vue.Draggable的基础使用方法可以看看这个哥们的https://blog.csdn.net/zjiang1994/article ...
vue拖拽组件（app移动端）
vue拖拽组件 <template><div id="webId">< ...
vue拖拽组件超好用！！！
vue拖拽组件在vue实现拖拽,经常使用到,所以自己封装了成了一个组件效果展示组件代码 <template><div class="dragBtn" @to ...
vue拖拽组件，从此解放你的双手
一??vue拖拽.拖拽它来啦!它来啦! -机智如我一??? 特别简单 ,安装.注册.引用即可完成拖拽需求控制台一??打印拖拽信息一??? 一??1.npm安装 npm install awe- ...
vue拖拽组件生成页面代码,vue可视化拖拽组件模板
怎么使用vuedraggable实现简单的拖拽,只拖拽一个内容(div) . 仔细观察发现,今日头条导航部分编辑效果,有以下几个效果1:点击编辑开启可以编辑的效果(也就是是否开启拖拽)2:拖拽前选中效 ...
简单使用vue拖拽组件vue3-dnd
项目中需要使用到拖拽,这里使用vue3-dnd来满足需求这里项目使用的vue3(使用js而非ts) 插件官网地址:Vue3 DnD 安装 npm install vue3-dnd react-dnd ...
Vue 拖拽组件（实现上下拖拽） vuedraggable
fm: 首先 npm i -S vuedraggable 这样可以实现一列按钮之间可以进行上下拖拽重新排版 <template><vuedraggable v-model=&qu ...

VUE 拖拽组件 vue.draggable

中文文档

安装

属性

引用

案例

单列拖动

多列拖动

VUE 拖拽组件 vue.draggable相关推荐

最新文章

热门文章