vue的拖拽插件: vue.draggable

这篇具有很好参考价值的文章主要介绍了vue的拖拽插件: vue.draggable。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

中文文档地址:

vue.draggable中文文档 - itxst.comVue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动,可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作,总之是一款非常优秀的vue拖拽组件。https://www.itxst.com/vue-draggable/tutorial.html1.安装

npm i -S vuedraggable

2.引入

import draggable from 'vuedraggable'

3.使用

 :key="keyDate" 改变 listBak时,刷新图表显示文章来源地址https://www.toymoban.com/news/detail-627541.html

<template>
  <div>
    <!-- 调用组件  -->
    <el-row :gutter="20">
      <el-col :span="4">
        <el-row style="background-color: #55ff7f">
          <draggable v-model="list" :group="groupA" class="dragBox" animation="100" @end="refreshKay">
            <div v-for="(item, index) in list" :key="index" class="show-li">{{ item.name }}</div>
          </draggable>
        </el-row>
      </el-col>
      <el-col :span="12" :key="keyDate">
        <el-row style="background-color: #55ff7f">
          <draggable v-model="listBak" :group="groupB" animation="100" class="dragBox" @end="refreshKay">
            <el-col v-for="(item, index) in listBak" :key="index" :span="item.width">
              <div @click="showTest(item)">
                <component :is="item.id" v-if="listComponents.includes(item.id)"></component>
              </div>
            </el-col>
          </draggable>
        </el-row>
        '查看顺序:' {{listBak}}
      </el-col>
      <el-col :span="8">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="名称">
            <el-input disabled v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="宽度">
            <el-input v-model="form.width"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="updateTest">立即更新</el-button>
        <el-button type="primary" @click="delTest">删除</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 引入拖拽组件
import draggable from 'vuedraggable'

export default {
  name: 'index',
  components: {
    // 注册draggable组件
    draggable,
    China: () => import('@/view/echarts/map/China'),
    Shandong: () => import('@/view/echarts/map/Shandong')
  },
  data() {
    return {
      listComponents: ['Shandong', 'China'],
      listBak: [],
      form: {
        id: '',
        name: '',
        width: 0
      },
      keyDate: 'T',
      list: [
        {
          id: 'China',
          name: '中国',
          width: 24
        },
        {
          id: 'Shandong',
          name: '山东',
          width: 24
        }
      ],
      groupA: {
        name: 'test',
        pull: true, // 可以拖出
        put: false // 可以拖入
      },
      groupB: {
        name: 'test',
        pull: false,
        put: true
      }
    }
  },
  methods: {
    showTest(param) {
      this.form = JSON.parse(JSON.stringify(param))
    },
    updateTest() {
      this.listBak.forEach(i => {
        if (i.id === this.form.id) {
          i.width = this.form.width
        }
      })
      this.refreshKay()
    },
    delTest() {
      // 获取元素在数组的位置
      let num = -1
      for (let i = 0; i < this.listBak.length; i++) {
        let item = this.listBak[i]
        if (item.id === this.form.id) {
          num = i
        }
      }
      // 删除元素
      if (num !== -1) {
        this.list.unshift(this.form)// 加回原数组
        this.listBak.splice(num, 1)// 从当前数组删除
      }
      this.refreshKay()
    },
    refreshKay() { // 刷新整体页面
      this.keyDate = 'T' + new Date()
    }
  }
}
</script>

<style scoped>
.dragBox {
  padding: 20px;
  min-height: 300px;
}
.show-li {
  padding: 6px;
  background-color: #fdfdfd;
  border: solid 1px #eee;
  margin-bottom: 10px;
  cursor: move;
}
.show-li:hover {
  background-color: #f1f1f1;
  cursor: move;
}

</style>

到了这里,关于vue的拖拽插件: vue.draggable的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • [开源]基于Vue的拖拽式数据报表设计器,为简化开发提高效率而生

    Cola-Designer 是一个 基于VUE,实现拖拽 + 配置方式生成数据大屏,为简化开发、提高效率而生。 使用GPL-2.0开源协议 部分截图:     实现完全拖拽 + 配置式生成大屏,设计即生产。(动态数据需要后端提供API接口) 项目采用行业流行架构:SpringBoot+Vue,开发部署方便。 内置

    2024年02月06日
    浏览(40)
  • vue3+element Plus实现弹框的拖拽、可点击底层页面功能

     1、template部分 必须加的属性         modal:是否去掉遮罩层         close-on-click-modal:是否可以通过点击modal关闭Dialog         draggable:开启拖拽功能 2、css部分 网上查找的资料,css需要修改pointer-events,主要的作用是 设置元素是否对鼠标事件做出反应   因为 .el-overlay-dialog的父

    2024年02月05日
    浏览(63)
  • 手撸前端 Grid 拖拽布局

    最近有个需求需要实现自定义首页布局,需要将屏幕按照 6 列 4 行进行等分成多个格子,然后将组件可拖拽对应格子进行渲染展示。 示例 对比一些已有的插件,发现想要实现产品的交互效果,没有现成可用的。本身功能并不是太过复杂,于是决定自己基于 vue 手撸一个简易的

    2024年02月05日
    浏览(31)
  • draggable + grid 拖拽插件 + 网格布局 动态生成首页模版

    背景:         1、首页模板由多个子组件组成,如图表、新闻、公告、轮播图等,一般都由前端引入子组件,写在固定的位置上,最终形成一个固定的首页模板;         2、像这样直接在代码中写死的首页没有灵活性,不同用户想展示出来的首页模板千篇一律;        

    2024年02月01日
    浏览(38)
  • vue3拖拽布局+动态组件+自适应布局

    1.拖拽布局插件 Vue Grid Layout -️ 适用Vue.js的栅格布局系统 可拖动和可调整大小栅格布局的Vue组件。 https://jbaysolutions.github.io/vue-grid-layout/zh/ //在package.json中dependencies下添加下面插件库,并执行命令npm install  \\\"vue-grid-layout\\\": \\\"^3.0.0-beta1\\\",  2.拖拽页面代码 3.图表子组件代码

    2024年02月11日
    浏览(41)
  • 前端css + js +vue +element-ui 实现响应式布局,根据浏览器窗体大小自动响应

    我的环境是element-ui vue版的,其他的也可以,主要是css和js的内容 首先在data中定义一个对象 其实就是css的样式,不过放在了js 里面而已 这里css设置了两个属性 一个是transform 这个属性对div标签的缩放作用,当浏览器窗口或者屏幕大小改变时,就调整这个属性的值,来等比缩放

    2024年02月13日
    浏览(58)
  • HTML5新增的拖拽属性draggable,怎么实现拖拽?

    1、draggable 属性规定元素是否可拖动。 2、提示: 链接和图像默认是可拖动的。 3、提示: draggable 属性经常用于拖放操作。 注意:draggable 属性是 HTML5 新增的。 设置属性值 值 描述 true 规定元素是可拖动的。 false 规定元素是不可拖动的。 auto 使用浏览器的默认特性。 代码演

    2024年02月16日
    浏览(38)
  • JS-27 前端数据请求方式;HTTP协议的解析;JavaScript XHR、Fetch的数据请求与响应函数;前端文件上传XHR、Fetch;安装浏览器插件FeHelper

    早期的网页都是通过后端渲染来完成的,即服务器端渲染(SSR,server side render): 客户端发出请求 - 服务端接收请求并返回相应HTML文档 - 页面刷新,客户端加载新的HTML文档; 服务器端渲染的缺点: 当用户点击页面中的某个按钮向服务器发送请求时,页面本质上只是一些数

    2024年02月16日
    浏览(62)
  • 实现简单的element-table的拖拽效果

    第一步,先随便创建element表格 第二步,里面的数据源tableData直接复制饿了么上的 第三步,需要安装sortablejs库并且在头部引入 第四步,通过ref获取table,这里给table的ref设置为dragTable 第五步,就是获取table然后设置它的一些属性,比如拖拽时的CSS,拖拽时的一些事件等,然后

    2024年02月11日
    浏览(37)
  • 微信小程序中的拖拽和缩放图片功能

    在现代的移动应用开发中,拖拽和缩放功能变得越来越重要。它们不仅使应用程序更具交互性,还为用户提供了更直观、更高效的使用体验。微信小程序作为一个流行的开发平台,也提供了这样的功能。以下是在微信小程序中实现拖拽和缩放图片的步骤和注意事项。 1.设置图

    2024年03月14日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包