vuedraggable+element ui实现页面控件拖拽排序效果

项目要实现一些控件的拖拽排序。从而找到了这款vuedraggable控件,供大家参考,具体内容如下

如上图要实现这些控件的拖拽排序
这是拖拽后

由于公司网络的原因,项目没有使用npm,都是使用的引入的js

<script type="text/javascript" src="lib/sortable/Sortable.min.js"></script>
<script type="text/javascript" src="lib/vuedraggable/vuedraggable.min.js"></script>

布局代码

<el-form :inline="true">
          <draggable v-model="filters" dragable="true" :move="getdata" @update="datadragEnd">
           <transition-group>
              <el-col :span="8" v-for="filter in filters" :key="filter.filterKey" style="margin-top: 5px">
                <el-form-item :label="filter.name" >
                  <el-input v-model="filter.displayName" placeholder="请输入设置属性" @focus="openFilterDialog(filter)"></el-input>
                </el-form-item>
              </el-col>
           </transition-group>
          </draggable>
          <fitlerdialog v-bind:visable=dialogObjectVisible v-bind:avtivefilter=avtivefilter  v-on:on-filter-data-change="onFilterDataChange" v-on:filterdialogcancle="handleDialogObjectcancle" v-on:filterdialogclose="handleDialogObjectClose"></fitlerdialog>
</el-form>

标签draggable放在你要拖拽的组件的最外层。

相关的处理代码

getdata(evt) {
  console.log(evt.draggedContext.filterKey)
  //这里evt.draggedContext后续的内容根据具体的定义变量而定
},
datadragEnd(evt) {
  console.log('拖动前的索引 :' + evt.oldIndex)
  console.log('拖动后的索引 :' + evt.newIndex);

  let filters = this.filters;
  for(let a=0;a<filters.length;a++){
    filters[a].index = a;
  }
  vm.report.filter = filters;

}

这里是因为我们需要将每个的顺序记录下来所以有业务代码。
每次移动后,可以通过v-model获取所有的控件,他们的顺序是当前排好的顺序,再进行index顺序记录。

evt为object,他的内容较多。

draggedContext: 被拖拽元素的上下文

index:拖拽元素的指针
element: 拖拽数据本身
futureIndex: 拖动后的index

element如图:

这是filters定义的数据本身也就是v-model内容。

relatedContext: 拖入区域的上下文

index: 目标元素的index
element:目标数据本身
list: 拖入的列表
component:目标组件

dragged:被拖拽元素的指向

大概就这些,功能较简单,但满足了要求就行。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue.draggable实现表格拖拽排序效果

    本文实例为大家分享了vue.draggable实现表格拖拽排序效果展示的具体代码,供大家参考,具体内容如下 主要使用vuedraggable和sortablejs两个组件. 1.安装组件 npm install vuedraggable npm install sortablejs 2.引入组件 import draggable from 'vuedraggable'; import Sortable from 'sortablejs'; export default { components:

  • vue draggable resizable 实现可拖拽缩放的组件功能

    虽然之前适配过旧版组件,但是因为2.0版本原作者对代码进行了重构,原来修改的代码照搬是不可能的了. 所以也就一直没有将 冲突检测 以及 吸附对齐 功能适配到2.0版本,最近正好有时间就适配一下. 新增特征 冲突检测 吸附对齐 默认样式优化 功能预览 项目地址 github.com/gorkys/vue-- 如果喜欢该项目,欢迎 Star 新增Props isConflictCheck Type: Boolean Required: false Default: false 定义组件是否开启冲突检

  • vue插件draggable实现拖拽移动图片顺序

    本文实例为大家分享了vue插件draggable实现拖拽移动图片顺序的具体方法,供大家参考,具体内容如下 例如图片显示的这种图片列表.商品展示需要拖动图片改变顺序,vuedraggable可以实现拖拽. 首先, npm i vuedraggable 然后在组件中引入, import draggable from 'vuedraggable'; 定义组件, components: { draggable, }, 标签中应用, <ul class="pic-list clearfix"

  • Vue.Draggable实现拖拽效果

    快速实现Vue.Draggable的拖拽效果,供大家参考,具体内容如下 1.下载包:npm install vuedraggable 配置:package.json "dependencies": { "element-ui": "^1.3.4", "less": "^2.7.2", "less-loader": "^4.0.4", "vue":

  • vue draggable resizable gorkys与v-chart使用与总结

    实现效果: 实现图表的二次封装以及表格的自由拖动,缩放功能 先贴出两个组件的地址: vue-draggable-resizable-gorkys v-chart 图标的二次封装 这里我们先做一个简单的封装 比如标题+图表的形式:chart_with_upwards_trend: <div class="chartcontainer"> <div>{{diyposition.title}}</div> <ve-line :data="c

  • vuedraggable+element ui实现页面控件拖拽排序效果

    项目要实现一些控件的拖拽排序.从而找到了这款vuedraggable控件,供大家参考,具体内容如下 如上图要实现这些控件的拖拽排序 这是拖拽后 由于公司网络的原因,项目没有使用npm,都是使用的引入的js <script type="text/javascript" src="lib/sortable/Sortable.min.js"></script> <script type="text/javascript"

  • IOS Xib控件拖拽与页面跳转实例

    之前一直都是用代码写UI,Xib使用比较少,今天做个简单的总结,也算重新学习下. 如下图一,右上角的红色圈圈,用来分屏用的,可以切换成2个屏幕,一个展示Xib的UI,一个展示代码,如下所示.主要为了控件与代码之间的连线用. 1. 给UIlabel ,UItextField 等控件关联IBOutlet 选中一个控件然后右键,然后出现一个黑色的框(如图2,红色圈起来的),然后选中Referencing Outlets ,按住ctrl建,拖到代码区域,就可以生成 @property (strong,n

  • Vue+Element ui实现树形控件右键菜单

    本文实例为大家分享了Vue+Element ui实现树形控件右键菜单的具体代码,供大家参考,具体内容如下 需求 实现树形控件右键菜单功能,有添加文件.删除文件.重命名功能 一.按需引入ELEMENTUI组件 按需引入ELEMENTUI组件 二.实现菜单功能 1.TEMPLATE 代码如下(示例): <!-- 树形组件 -->   <el-tree               :data="data"               @node-contextmenu=&q

  • vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序

    vue拖拽克隆clone组件API, vue.draggable实现盒子之间相互拖拽排序克隆(网上资源整理的文档) 效果图: -------------------------------------------------------------------------------- 首先需要安装vuedraggable依赖包: npm install vuedraggable --save 因为拖拽组件依赖sortablejs ,如果项目没有安装sortablejs ,可能需要安装一下 np

  • vue实现页面div盒子拖拽排序功能

    vue 实现页面div盒子拖拽排序功能前言:目前市面上有很多实现拖拽排序功能的插件和方法,本节不过多累述,只讲一种:css3的transition-group方法 效果图: 1. DOM中使用: <transition-group class="container" name="sort"> <div class="app-item" v-for="app in customApps" :key="

  • jQuery拖拽排序插件制作拖拽排序效果(附源码下载)

    使用jquery拖拽排序插件制作拖拽排序效果是一款非常实用的鼠标拖拽布局插件.效果图如下: 效果演示         源码下载 html代码: <h1>水平拖拽</h1> <div class="demo"> <div class="item item1"><span>1</span></div> <div class="item item2"><

  • vue实现拖拽排序效果

    本文实例为大家分享了vue实现拖拽排序效果的具体代码,供大家参考,具体内容如下 效果预览 组件 drag.vue <template>   <TransitionGroup name="group-list" tag="ul">     <li       v-for="(item, index) in list"       :key="item.name"       :draggable=&

  • RecyclerView实现拖拽排序效果

    效果就是这样,RecyclerView列表可拖拽排序,可删除,可添加: RecyclerView给我们提供了一个手势器: ItemTouchHelper helper = new ItemTouchHelper(new ItemTouchHelper.Callback() { @Override public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) { int drag

  • C#利用控件拖拽技术制作拼图游戏

    主要实现的功能: 1.程序附带多张拼图随机拼图. 2.可手动添加拼图. 3.游戏成功判断. 4.30秒超时判断. Puzzle.cs using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms

随机推荐