使用vuedraggable实现从左向右拖拽_vuedraggable拖拽范围_MasonYyp的博客

1 功能描述

使用vuedraggable实现从左边框中拖拽到右边的框中，左边的框不能随意拖拽改变位置，不能向左边框中拖拽组件。右边框中的组件可以拖动位置，但不能拖入到左边框里。

注意事项如下：

（1）draggable的group中的name属性必须一致；

（2）左边框中的draggable必须含有以下属性，group中的pull:'clone'属性表示可以生成新的组件；group中的put:false属性表示不能向里面拖拽组件；{sort: false}属性表示不能更改组件的位置。

（3）左边框中的draggable中的clone="cloneItem"表示组件被拖拽到右边框中后，将生成的是新的组件，如果修改右边组件的数据不会影响左边组件的数据。cloneItem实现的是对每个组件的深复制。如果要实现修改两边框中的任何组件，两边组件都会同步变化，则需要删除clone="cloneItem"属性。

（4）右边框中的draggable中的start属性是监听开始拖动组件，add是监听添加组件，可以根据情况调用其中的数据。

（5）从左边框拖入右边框中判断单个数据是否合法，可以使用move属性，如果，左侧单个数据不合法返回false，则无法添加到右侧框中。

3 源代码

<template>
  <div class="my_draggle">
    <div class="md_title">使用vuedraggable实现从左到右拖拽</div>
    <div class="md_con">
      <draggable
        class="mdc_left"
        v-model="originDataArr"
        v-bind="{sort: false}"
        v-bind:group="{ name:'person', pull:'clone', put:false }"
        v-bind:clone="cloneItem">
        <div v-for="(item,index) in originDataArr" v-bind:key="index">
          <span>{{item.name}}</span>&nbsp;&nbsp;
          <span>{{item.sex}}</span>
      </draggable>
      <draggable
        class="mdc_right"
        v-model="newDataArr"
        v-bind:group="{name:'person'}"
        v-on:start="dragItem"
        v-on:add="addItem">
        <div v-for="(item,index) in newDataArr" v-bind:key="index">
          <span><img v-bind:src="item.icon" /></span>&nbsp;&nbsp;
          <span>{{item.name}}</span>&nbsp;&nbsp;
          <span>{{item.sex}}</span>
      </draggable>
</template>
<script>
import draggable from "vuedraggable"
export default {
  name: 'MyDraggle',
  components:{
    draggable
  props: {
    msg: String
  data: function(){
    return{
      originDataArr: new Array(),
      newDataArr: new Array()
  mounted: function(){
    this.initData();
  methods: {
    initData: function(){
      this.originDataArr = [
        {name:"张三", age: 15, sex: "男", icon: require("@/assets/logo.png")},
        {name:"李四", age: 15, sex: "男", icon: require("@/assets/logo.png")},
        {name:"王五", age: 15, sex: "男", icon: require("@/assets/logo.png")},
        {name:"小花", age: 15, sex: "女", icon: require("@/assets/logo.png")}
    cloneItem: function(val){
      // 深复制一个节点
      return JSON.parse(JSON.stringify(val)) 
    dragItem: function(widget){
      console.log(widget);
    addItem: function(widget){
      console.log(widget);
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.my_draggle{
  position: relative;
.md_title{
  font-size: 24px;
  height: 60px;
.md_con>div{
  width: 600px;
  height: 600px;
  display: inline-block;
  border: 1px solid #CCCCCC;
  border-radius: 10px;
  vertical-align: top;
.mdc_left>div{
  height: 40px;
  line-height: 40px;
  margin-top: 6px;
  border: 1px solid #CCCCCC;
  cursor: move;
  margin: 10px 20px;
.mdc_left>div:hover{
  box-shadow: 1px 2px 4px #CCCCCC;
.mdc_right>div{
  height: 40px;
  line-height: 40px;
  margin-top: 6px;
  border: 1px solid #CCCCCC;
  cursor: move;
  margin: 10px 20px;
.mdc_right>div:hover{
  box-shadow: 1px 2px 4px #CCCCCC;
.mdc_right>div>span{
  display: inline-block;
  vertical-align: top;
.mdc_right>div>span>img{
  height: 30px;
</style>
                                    本文实例为大家分享了vue.draggable实现表格拖拽排序效果展示的具体代码，供大家参考，具体内容如下
主要使用vuedraggable和sortablejs两个组件。 
1、安装组件
npm install vuedraggable
npm install sortablejs
2、引入组件
import draggable from 'vuedraggable';
import Sortable from 'sortablejs';
export default {
  components: {
    draggable,
    Sortable
                                    draggable区域内嵌入多层，要把拖拽区域加上class名称，draggable=‘.class名’,这样就能确保draggable内部分可以拖拽，部分不能拖拽
el-image的点击事件和vue.draggable的拖拽事件会有事件冲突的问题，那么你需要使用.stop和.prevent修饰符来禁止默认事件和冒泡.
                                    vue.draggable group 拖拽分组多组之间相互拖拽，可以实现不同数组之间相互拖拽。比如group都为itxst的组之间可以相互拖动，本文例子中A列和B列可以相互拖动，但是无法拖到C列。
<template>
<!--使用draggable组件-->
<div class="itxst">
  <span>A、B列可以相互拖动，无法拖到C列</span>
<div class="col">
                                    今天分享一个vue项目中在不同列表拖拽设置选项的功能，这个功能也是在做项目中遇到的，先说下这个功能的要点(参考下图)，有2个列表，左侧列表展示已选，右侧列表展示未选，通过拖拽进行设置，已选的选项不能超过4个，超过的话自动将拖拽之前的最后一项清除到右侧，且如果从已选往未选里拖的时候，右侧显示垃圾桶的提示(如图)。
拖拽功能图片：
垃圾桶显示图：
首先讲讲vue-draggable的使用
安装vue-draggable:
npm install vuedraggable
在使用插件的组件内引
                                    使用 vuedraggable 实现拖拽排序功能效果展示实现步骤
vuedraggable 中文文档： https://www.itxst.com/vue-draggable/tutorial.html
实现步骤
npm install vuedraggable --save
组件中引入
import draggable from "vuedraggable";
components: {
  draggable,
组件中使用
<template>
                                    一. 下载依赖包：npm install vuedraggable -S
二. 在需要使用的当前界面引入依赖，注册组件：
import draggable from 'vuedraggable'
export default {
  components: { draggable },
三. 在template 中建立表格，分别写出thead 部分不变， 此处需要将draggable 渲染成tbody，不然draggable会被解析成div 影响样式。
<table class="dataT
录屏软件：screenToGif (将视频转为Gif，我认为简单又好操作)
我深知，文字的感知不如图片，图片的感知不如视频，所以希望在每一次的记录中，都有种收货与喜悦，虽然以前用过这个插件，相当强大的插件，但第一次从0到1，所以记录美好时刻~
1.多列之间想要互相拖动
要有相同的name，如：name:'site'
2.多列直接想要拷贝，不移除