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

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

成都创新互联成立于2013年,是专业互联网技术服务公司,拥有项目成都网站建设、网站设计网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元龙南做网站,已为上家服务,为龙南各地企业和个人服务,联系电话:18980820575

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

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

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

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


布局代码


          
           
              
                
                  
                
              
           
          
          

标签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

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

evt为object,他的内容较多。

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

draggedContext: 被拖拽元素的上下文

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

element如图:

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

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

relatedContext: 拖入区域的上下文

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

dragged:被拖拽元素的指向

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

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


分享标题:vuedraggable+elementui实现页面控件拖拽排序效果
标题链接:http://myzitong.com/article/pocdph.html