自己封装的vue拖拽组件

最新推荐文章于 2024-05-08 11:00:19 发布
最新推荐文章于 2024-05-08 11:00:19 发布
阅读量357 收藏
点赞数 1
分类专栏： vue拖拽 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41228055/article/details/110002238
版权

自己封装的vue拖拽组件

使用Vue.Draggable实现

Vue.Draggable的基础使用方法可以看看这个哥们的https://blog.csdn.net/zjiang1994/article/details/79809687

实现效果如下，用的好的话点个赞 谢谢

<template>
  <div class="dndList">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="事务执行" name="first">
        <!--所有的能力项-->
        <div class="dndList-list1">
          <div class="fontz1 pos1">事务型：</div>
          <div class="fontz1 pos2">操作型：</div>
          <div class="fontz1 pos3">技能型：</div>
          <draggable
            :list="oldList1"
            :options="{
              group: { name: falgs, pull: 'clone' },
              filter: '.undraggable',
              sort: false,
            }"
            @end="end1"
            class="dragArea"
          >
            <div
              v-for="element in oldList1"
              :key="element.id"
              :class="{ undraggable: element.flag }"
              class="list-complete-item2"
            >
              <div class="list-complete-item-handle2">{{ element.name }}</div>
            </div>
          </draggable>
        </div>
      </el-tab-pane>
      <el-tab-pane label="研发策划" name="second">
        <div class="dndList-list1">
          <div class="fontz1 pos1">事务型：</div>
          <div class="fontz1 pos2">操作型：</div>
          <div class="fontz1 pos3">技能型：</div>
          <draggable
            :list="oldList2"
            :options="{
              group: { name: falgs, pull: 'clone' },
              filter: '.undraggable',
              sort: false,
            }"
            @end="end2"
            class="dragArea"
          >
            <div
              v-for="element in oldList2"
              :key="element.id"
              :class="{ undraggable: element.flag }"
              class="list-complete-item2"
            >
              <div class="list-complete-item-handle2">{{ element.name }}</div>
            </div>
          </draggable>
        </div>
      </el-tab-pane>
      <el-tab-pane label="服务关系" name="third">
        <div class="dndList-list1">
          <div class="fontz1 pos1">事务型：</div>
          <div class="fontz1 pos2">操作型：</div>
          <div class="fontz1 pos3">技能型：</div>
          <draggable
            :list="oldList3"
            :options="{
              group: { name: falgs, pull: 'clone' },
              filter: '.undraggable',
              sort: false,
            }"
            @end="end3"
            class="dragArea"
          >
            <div
              v-for="element in oldList3"
              :key="element.id"
              :class="{ undraggable: element.flag }"
              class="list-complete-item2"
            >
              <div class="list-complete-item-handle2">{{ element.name }}</div>
            </div>
          </draggable>
        </div>
      </el-tab-pane>
      <el-tab-pane label="开拓影响" name="fourth">
        <div class="dndList-list1">
          <div class="fontz1 pos1">事务型：</div>
          <div class="fontz1 pos2">操作型：</div>
          <div class="fontz1 pos3">技能型：</div>
          <draggable
            :list="oldList4"
            :options="{
              group: { name: falgs, pull: 'clone' },
              filter: '.undraggable',
              sort: false,
            }"
            @end="end4"
            class="dragArea"
          >
            <div
              v-for="element in oldList4"
              :key="element.id"
              :class="{ undraggable: element.flag }"
              class="list-complete-item2"
            >
              <div class="list-complete-item-handle2">{{ element.name }}</div>
            </div>
          </draggable>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="dndList-list" style="font-size:18px; border-top: none; border-bottom: none;">
      <span>将所需要的内在能力拖拽至下方框中</span>
    </div>
    <!--需要的能力项-->
    <div class="dndList-list">
      <div>
        <div class="rongqi">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <el-row>
          <el-col :span="3">
            <div class="fontz">主要能力：</div>
          </el-col>
          <el-col :span="20">
            <draggable
              :list="list1"
              :options="{ group: 'article', disabled: disabled }"
              @start="start22"
              @end="end22"
              class="dragArea11"
              style="height: 90px"
            >
              <div
                v-for="(element, index) in list1"
                :key="element.id"
                class="list-complete-item"
              >
                <div class="list-complete-item-handle">
                  {{ element.name }}
                  <i
                    class="el-icon-delete"
                    @click="handleDel1(index, element.id)"
                  ></i>
                </div>
              </div>
            </draggable>
          </el-col>
        </el-row>
      </div>
      <div>
        <div class="rongqi">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <el-row>
          <el-col :span="3">
            <div class="fontz">辅助能力：</div>
          </el-col>
          <el-col :span="20">
            <draggable
              :list="list2"
              :options="{ group: 'article', disabled: disabled }"
              @start="start22"
              @end="end22"
              class="dragArea11"
              style="height: 90px"
            >
              <div
                v-for="(element, index) in list2"
                :key="element.id"
                class="list-complete-item"
              >
                <div class="list-complete-item-handle">
                  {{ element.name }}
                  <i
                    class="el-icon-delete"
                    @click="handleDel2(index, element.id)"
                  ></i>
                </div>
              </div>
            </draggable>
          </el-col>
        </el-row>
      </div>
      <div>
        <div class="rongqi">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <el-row>
          <el-col :span="3">
            <div class="fontz">次要能力：</div>
          </el-col>
          <el-col :span="20">
            <draggable
              :list="list3"
              :options="{ group: 'article', disabled: disabled }"
              @start="start22"
              @end="end22"
              class="dragArea11"
              style="height: 90px"
            >
              <div
                v-for="(element, index) in list3"
                :key="element.id"
                class="list-complete-item"
              >
                <div class="list-complete-item-handle">
                  {{ element.name }}
                  <i
                    class="el-icon-delete"
                    @click="handleDel3(index, element.id)"
                  ></i>
                </div>
              </div>
            </draggable>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import draggable from "vuedraggable";

export default {
  name: "DndList",
  components: { draggable },
  watch: {},
  data() {
    return {
      activeName: "first",
      falgs: "article",
      disabled: false,
      list1: [],
      list2: [],
      list3: [],
      oldList1: [
        { id: 1, name: "能力1" },
        { id: 2, name: "能力2" },
        { id: 3, name: "能力3" },
        { id: 4, name: "能力4" },
        { id: 5, name: "能力5" },
        { id: 6, name: "能力6" },
        { id: 7, name: "能力7" },
        { id: 8, name: "能力8" },
        { id: 9, name: "能力9" },
        { id: 10, name: "能力10" },
        { id: 11, name: "能力11" },
        { id: 12, name: "能力12" },
      ],
      oldList2: [
        { id: 13, name: "能力13" },
        { id: 14, name: "能力14" },
        { id: 15, name: "能力15" },
        { id: 16, name: "能力16" },
        { id: 17, name: "能力17" },
        { id: 18, name: "能力18" },
        { id: 19, name: "能力19" },
        { id: 20, name: "能力20" },
        { id: 21, name: "能力21" },
        { id: 22, name: "能力22" },
        { id: 23, name: "能力23" },
        { id: 24, name: "能力24" },
      ],
      oldList3: [
        { id: 25, name: "能力25" },
        { id: 26, name: "能力26" },
        { id: 27, name: "能力27" },
        { id: 28, name: "能力28" },
        { id: 29, name: "能力29" },
        { id: 30, name: "能力30" },
        { id: 31, name: "能力31" },
        { id: 32, name: "能力32" },
        { id: 33, name: "能力33" },
        { id: 34, name: "能力34" },
        { id: 35, name: "能力35" },
        { id: 36, name: "能力36" },
      ],
      oldList4: [
        { id: 37, name: "能力37" },
        { id: 38, name: "能力38" },
        { id: 39, name: "能力39" },
        { id: 40, name: "能力40" },
        { id: 41, name: "能力41" },
        { id: 42, name: "能力42" },
        { id: 43, name: "能力43" },
        { id: 44, name: "能力44" },
        { id: 45, name: "能力45" },
        { id: 46, name: "能力46" },
        { id: 47, name: "能力47" },
        { id: 48, name: "能力48" },
      ],
    };
  },
  watch: {
    list1(val) {
        if(val.length>4){
            this.handleDel1(4,val[4].id)
        }
    },
    list2(val) {
        if(val.length>4){
            this.handleDel2(4,val[4].id)
        }
    },
    list3(val) {
        if(val.length>4){
            this.handleDel3(4,val[4].id)
        }
    },
  },
  computed: {},
  methods: {
    childMethod(){
      console.log(this.oldList1)
      console.log(this.oldList2)
      console.log(this.oldList3)
      console.log(this.oldList4)
      console.log(this.list1)
      console.log(this.list2)
      console.log(this.list3)
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    end1(ev) {
      if (ev.to.className === "dragArea11") {
        this.$set(this.oldList1[ev.oldIndex], "flag", true);
      }
    },
    end2(ev) {
      if (ev.to.className === "dragArea11") {
        this.$set(this.oldList2[ev.oldIndex], "flag", true);
      }
    },
    end3(ev) {
      if (ev.to.className === "dragArea11") {
        this.$set(this.oldList3[ev.oldIndex], "flag", true);
      }
    },
    end4(ev) {
      if (ev.to.className === "dragArea11") {
        this.$set(this.oldList4[ev.oldIndex], "flag", true);
      }
    },
    start22(event) {
      this.falgs = "222222";
    },
    end22(ev) {
      this.falgs = "article";
    },
    handleDel1(index, id) {
      this.list1.splice(index, 1);
      var q;
      if (id < 13) {
        q = this.oldList1.find((value, index, arr) => {
          return value.id === id;
        });
      } else if (12 < id && id < 25) {
        q = this.oldList2.find((value, index, arr) => {
          return value.id === id;
        });
      } else if (24 < id && id < 37) {
        q = this.oldList3.find((value, index, arr) => {
          return value.id === id;
        });
      } else {
        q = this.oldList4.find((value, index, arr) => {
          return value.id === id;
        });
      }

      this.$set(q, "flag", false);
    },
    handleDel2(index, id) {
      this.list2.splice(index, 1);

      var q;
      if (id < 13) {
        q = this.oldList1.find((value, index, arr) => {
          return value.id === id;
        });
      } else if (12 < id && id < 25) {
        q = this.oldList2.find((value, index, arr) => {
          return value.id === id;
        });
      } else if (24 < id && id < 37) {
        q = this.oldList3.find((value, index, arr) => {
          return value.id === id;
        });
      } else {
        q = this.oldList4.find((value, index, arr) => {
          return value.id === id;
        });
      }

      this.$set(q, "flag", false);
    },
    handleDel3(index, id) {
      this.list3.splice(index, 1);

      var q;
      if (id < 13) {
        q = this.oldList1.find((value, index, arr) => {
          return value.id === id;
        });
      } else if (12 < id && id < 25) {
        q = this.oldList2.find((value, index, arr) => {
          return value.id === id;
        });
      } else if (24 < id && id < 37) {
        q = this.oldList3.find((value, index, arr) => {
          return value.id === id;
        });
      } else {
        q = this.oldList4.find((value, index, arr) => {
          return value.id === id;
        });
      }

      this.$set(q, "flag", false);
    },
  },
};
</script>
 
<style rel="stylesheet/scss" lang="scss" scoped>
.pos1 {
  position: absolute;
  top: 20px;
}
.pos2 {
  position: absolute;
  top: 92px;
}
.pos3 {
  position: absolute;
  top: 162px;
}
.rongqi {
  width: 100%;
  position: absolute;
  left: 120px;
  div {
    float: left;
    width: 150px;
    height: 50px;
    border-radius: 4px;
    margin: 20px 20px 0 0;
    border: 1px solid #000;
  }
}
.dragArea11 {
  width: 700px;
  overflow: hidden;
}

.dndList-list1 {
  color: #000;
  position: relative;
  width: 830px;
  border: 1px solid #000;
  padding: 0 20px 20px;
  border-top: none;
  //   margin: 20px;
}
.dndList-list {
  color: #000;
  width: 830px;
  border: 1px solid #000;
  padding: 20px;
  //   margin: 20px;
}
.fontz {
  height: 100px;
  line-height: 90px;
  font-size: 18px;
  font-family: "微软雅黑";
  font-weight: 600;
}
.fontz1 {
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  font-family: "微软雅黑";
  font-weight: 600;
}
.list-complete-item {
  cursor: pointer;
  position: relative;
  font-size: 16px;
  line-height: 50px;
  text-align: center;
  display: inline-block;
  margin-right: 20px;
  width: 150px;
  height: 50px;
  border-radius: 4px;
  margin: 20px 20px 0 0;
  border: 1px solid #000;
  transition: all 1s;
}
.dragArea {
  width: 680px;
  position: relative;
  right: -98px;
}
.list-complete-item2 {
  cursor: pointer;
  position: relative;
  font-size: 16px;
  line-height: 50px;
  text-align: center;
  display: inline-block;
  margin: 20px 20px 0 0;
  width: 150px;
  height: 50px;
  border-radius: 4px;
  border: 1px solid #000;
  transition: all 1s;
}
.list-complete-item.sortable-chosen {
  background: #4AB7BD;
}

.list-complete-item.sortable-ghost {
  background: #30B08F;
}
.undraggable {
  background-color: #ccc;
}

.list-complete-enter,
.list-complete-leave-active {
  opacity: 0;
}
</style>
<style lang="less">
.dndList {
  .el-tabs__header {
    width: 830px;
    margin: 0;
    border: 1px solid #000;
  }
  .el-tabs__nav-wrap::after {
    background-color: #000;
  }
  .el-tabs__item {
    font-size: 20px;
    height: 50px;
    line-height: 50px;
    width: 200px;
    text-align: center;
  }
}
</style>

 

三两仙气
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于Vue.js的可拖拽树组件
05-07
一个基于Vue.js的可拖拽可分析树级组件。兼容Chrome,Firefox,IE Edge
vue封装组件实现拖拽效果
王二的博客
04-13 458
vue中自己封装组件实现拖拽效果。
el-tabs 借助 sortablejs 实现 tab 拖拽功能
最新发布
sinat_33255495的博客
05-08 422
是一款 js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。不依赖jQuery。支持Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、ElementUI。你可以用来拖拽div、table等元素。这里我们借助 sorttable 来实现 el-tabs 的拖拽功能。
Vue中draggable拖拉拽组件使用
梓齐丶的博客
06-09 2078
安装 npm i vuedraggable -S 属性 group: { name: "...", pull: [true, false, clone], tag: 'td' // 默认div，设置draggable标签解析html标签 v-model：data // 绑定数据列表 put: [true, false, array] } //name相同的组可以互相拖动, pull可以写条件判断，是否允许拖走，put可以写条件判断，是否允许拖入 sort: true, // 内部拖动排序列表 dela
工作经验-组件封装(拖拽排序组件)
weixin_45805459的博客
07-29 164
vue3可拖拽排序定义样式组件
封装一个可拖拽的Tree组件（Vue），并上传到NPM
weixin_33842328的博客
06-19 2191
Github : https://github.com/shuiRong/v...DEMO: https://vigilant-curran-d6fec... 有需求才有动力 一开始在新项目里用的Tree组件是Element的，但踩到坑了：Tree节点的填加/删除无法反映到data里，这个影响就比较大了。然后我通过一些奇技淫巧让节点的改...
Vue拖拽组件开发实例详解
12-01
封装Vue组件的主要目标是提高代码的复用性和可维护性。复用性体现在组件化之后，可以通过配置参数来差异化各个组件的样式和逻辑，从而使得组件可以适应多种场景，提高代码的灵活性。而可维护性则因为组件内部的逻辑...
Vue 拖拽组件源码
10-25
Vue 拖拽组件源码的分析将帮助我们深入理解如何在 Vue 项目中实现拖放功能。 首先，让我们了解 Vue.Draggable 的基本使用方法。在项目中引入 Vue.Draggable，可以通过 npm 安装： ```bash npm install ...
antv/x6封装vue2.0源码
05-13
本文将深入探讨“antv/x6 封装 vue2.0 源码”中的关键知识点，助你理解和掌握如何利用这些技术实现增删改连线、拖拽生成功能、撤销保存、放大缩小等高级功能。 1. **AntV X6 图形引擎：** AntV X6 是基于 SVG 和 ...
vue-draggable-div：vue可拖拽可伸缩的组件
02-13
vue可拖拽可伸缩的组件，目前只是上方，详见以下传送门 安装 npm install vue-draggable-div 使用 [removed] import VueDraggableDiv from 'vue-draggable-div' ... components: {VueDraggableDiv} 需要使用样式...
vue封装一个简单的div框选时间的组件的方法
11-29
在 Vue 中封装组件是其核心特性之一，可以提高代码的复用性和可维护性。本篇将介绍如何封装一个简单的基于div的框选时间的组件，主要涉及的技术点包括Vue组件、事件处理、DOM操作以及CSS定位。 首先，我们要实现的...
vueUtils:基于element 封装的可拖拽表单
05-11
demo 在线预览 git subtree push --prefix=dist origin gh-pages . gzip压缩 //引入该插件 const CompressionWebpackPlugin = require("compression-webpack-plugin") //匹配此 {RegExp} 的资源 const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i const plugins = [] // start 生成 gzip 压缩文件 plugins.push( new CompressionWebpackPlugin({ filename: "[path].gz[query]", //目标资源名称 algorithm: "gzip", test: productio
Vue自定义组件——封装一个简单的可拖拽的弹出框 可拖拽的Dialog
丶扁扁的糖是扁的 的博客
06-03 1204
首先明确需要传入组件的属性： * @Props: dialogVisible Number 非0打开 allowDrag Boolean 是否可以拖拽 noFoot Boolean 是否显示按钮行 @submit Function 点击提交按钮的回调 --> 设计组件的组成部分，这里简单的加了一个遮罩，只有遮罩层和弹窗主体。 用到了h5的drag属性https://www.ru...
在vue中封装一个很好用的自定义拖动指令
不染-9732
03-29 301
在vue中封装一个很好用的自定义拖动指令
vue实现model框拖拽
m0_69728991的博客
06-07 617
model框偶尔会需要实现拖拽功能，但无论是elementUi还是antd-vue框架内的model框都无法拖拽，这时就需要我们进行如下操作
实现Ant Design Vue的modal可拖拽
冰咖啡的专栏
08-04 4137
​ 公司最近在做的一个Ant Design Vue项目，其中的某个功能页面的modal弹出框遮挡了页面的部分内容，所以需要这个modal能够用鼠标拖拽到任意位置。 ​
Vue下实现拖拽（使用vuedraggable）
one__month的博客
11-13 2153
Vue下实现拖拽（使用vuedraggable） 由于客户提了一个比较特殊的要求，就是拖拽换房！我当时听到是崩溃的=.=谁让人家是ke(ba)hu(ba)。于是开始摸索。bd了一下，咦，果然有人已经做好了，嘿嘿嘿。贡献出 拖拽插件的github地址 安装 npm i -S vuedraggable 页面里引入 import draggable from 'vuedraggable' 注册为组件...
vue封装元素拖拽指令
单眼皮丶儿的博客
12-18 434
/** * 用于实现元素拖拽 drag.ts */ export default { bind(el: HTMLElement) { el.style.position = 'absolute'; // 将元素定位 let x = 0; let y = 0; let l = 0; let t = 0; let isDown = false; // 鼠标按下事件 el.onmousedown = function(e: any) { .
vue.draggable实现元素拖动效果
Tfishupupup的博客
03-11 2604
找了很久的使用文档 使用文档，有实例还有代码演示 有几个需要拖动的列表就用几个数组就要有几个配置选项。 但是现在控制台会报警告，应该是废弃了这种使用方法，但我没改出来，有会使用的可以在评论区指导一下吗。感谢！ <draggable class="list-group" element="ul" v-model="list1" :options="dragOptions1"
vue element 弹窗组件封装
06-28
总之，封装Vue Element UI弹窗组件需要先熟悉Vue框架和Vue Element UI组件的使用，然后再根据自己的需求来设计和实现自定义组件。 回答： 是的，您可以按照上述步骤来封装一个自定义的Vue Element UI弹窗组件。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值