Vue实现拖放排序功能的实例代码

Vue中实现拖放排序,啥也不说,贴上代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
ul {
min-height: 100px;
width: 200px;
margin: 20px auto;
background: #eee;
}
li {
min-height: 2em;
margin-top: 10px;
background: #abcded;
}
/ 组件过渡类 /
.drog-move {
transition: transform 1s;
}
</style>
<body>
<div id="app">
<transition-group name="drog" tag="ul">
  <li draggable="true" v-for="(item, index) in lists" @dragstart="dragStart($event, index)" @dragover="allowDrop" @drop="drop($event, index)" v-bind:key="item">{{item}}</li>
</transition-group>
</div>
</body>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
  lists: ['1: apple', '2: banana', '3: orange', '4: melon']
},
methods: {
  //取消默认行为
  allowDrop(e){
    e.preventDefault();
  },
  //开始拖动
  dragStart(e, index){
    let tar = e.target;
    e.dataTransfer.setData('Text', index);
    if (tar.tagName.toLowerCase() == 'li') {
      // console.log('drag start')
      // console.log('drag Index: ' + index)
    }
  },
  //放置
  drop(e, index){
    this.allowDrop(e);
    // console.log('drop index: ' + index);
    //使用一个新数组重新排序后赋给原变量
    let arr = this.lists.concat([]),
      dragIndex = e.dataTransfer.getData('Text');
      temp = arr.splice(dragIndex, 1);
    arr.splice(index, 0, temp[0]);
    // console.log('sort');
    this.lists = arr;
  }
}
})
</script>

</html>

ps:下面看下vue 拖拽排序的实例代码,具体代码如下所示:

<template>
  <section class="main">
    <div class="drag-box-left">
      <div class="drag-title">拖动排序</div>
      <div class="drag-list" draggable="true"
        v-for="list in data1"
        :data-id="list.id"
        @dragstart="dragstartEvent"
        @dragend="dragendEvent"
        @dragenter="dragenterEvent"
        @dragleave="dragleaveEvent"
        @dragover="dragoverEvent"
      >{{list.title}}</div>
    </div>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        dragElement: null,
        lock: true,
        data1: [
          {id: 1, title: '这里是列表1的标题'},
          {id: 2, title: '这里是列表2的标题'},
          {id: 3, title: '这里是列表3的标题'},
          {id: 4, title: '这里是列表4的标题'},
          {id: 5, title: '这里是列表5的标题'},
          {id: 6, title: '这里是列表6的标题'},
          {id: 7, title: '这里是列表7的标题'}
        ],
        data2: [
          {id: 1, title: '这里是列表11的标题'},
          {id: 2, title: '这里是列表12的标题'},
          {id: 3, title: '这里是列表13的标题'},
          {id: 4, title: '这里是列表14的标题'}
        ]
      }
    },
    methods: {
      dragstartEvent(ev) {
        const self = this;
        self.dragElement = ev.target;
        ev.target.style.backgroundColor = '#f8f8f8';
      },
      dragendEvent(ev) {
        ev.target.style.backgroundColor = '#fff';
        ev.preventDefault();
      },
      dragenterEvent(ev) {
        const self = this;
        if(self.dragElement != ev.target){
          ev.target.parentNode.insertBefore(self.dragElement, ev.target);
        }
      },
      dragleaveEvent(ev) {
        const self = this;
        if(self.dragElement != ev.target){
          if(self.lock && (ev.target == ev.target.parentNode.lastElementChild || ev.target == ev.target.parentNode.lastChild)){
            ev.target.parentNode.appendChild(self.dragElement);
            self.lock = false;
          }else{
            self.lock = true;
          }
        }
      },
      dragoverEvent(ev) {
        ev.preventDefault();
      }
    }
  }
</script>
<style scoped>
  .drag-box-left{
    float: left;
    width: 45%;
  }
  .drag-box-right{
    float: right;
    width: 45%;
  }
  .drag-list{
    border: 1px solid #ddd;
    padding:10px;
    margin-bottom: 20px;
    transition: border .3s;
  }
  .drag-list:hover{
    border: 1px solid #20a0ff;
  }
  .drag-title{
    font-weight: 400;
    line-height: 25px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
  }
</style>

总结

以上所述是小编给大家介绍的Vue实现拖放排序功能的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

(0)

相关推荐

  • vue 中基于html5 drag drap的拖放效果案例分析

    事情是这样的,右边有各种控件,可以拖动到右边自由区,在自由区内可以随意拖动. 案例一: 开始的我,so easy! 通过绑定元素的mousedown 事件,监听鼠标的mousemove,和mouseup 事件,于是我轻松实现了同一区域内元素可以拖着跑,上代码! move (e) { let odiv = e.target // 获取目标元素 // 算出鼠标相对元素的位置 let disX = e.clientX - odiv.offsetLeft let disY = e.clientY - o

  • Vue.js实现多条件筛选、搜索、排序及分页的表格功能

    与上篇实践教程一样,在这篇文章中,我将继续从一种常见的功能--表格入手,展示Vue.js中的一些优雅特性.同时也将对filter功能与computed属性进行对比,说明各自的适用场景,也为vue2.0版本中即将删除的部分filter功能做准备. 需求分析 还是先从需求入手,想想实现这样一个功能需要注意什么.大致流程如何.有哪些应用场景. 表格本身是一种非常常用的组件,用于展示一些复杂的数据时表现很好. 当数据比较多时,我们需要提供一些筛选条件,让用户更快列出他们关注的数据. 除了预设的一些筛选条

  • Vue.js bootstrap前端实现分页和排序

    写之前先抱怨几句.本来一心一意做.net开发的,渐渐地成了只做前端.最近项目基本都用java做后台,我们这些.net的就成了前端,不是用wpf做界面,就是用html写web页面. 深知自己前端技术不足,以前虽说用asp.net前后台都做,但是,对于前端都是用现成的js库和页面模板,对于vue.js等框架基本没有接触过. 只怪自己不会写java,最近做一个项目,负责前端,后台传来数据不分页,前端收到所有数据后自己分页.我尽是无语. 正好最近在看vue.js.这个页面就用它来实现吧.顺便总结下. 效

  • vue 根据数组中某一项的值进行排序的方法

    vue中数组和对象的排序 1数组排序 <div id="app"> <ul> <li v-for="a in arr1">{{a}}</li> </ul> </div> <script type="text/javascript"> new Vue({ el:"#app", data:{ arr:[1,4,5,2,3,44] },compute

  • vue拖拽排序插件vuedraggable使用方法详解

    大家好,最近做的项目要用到拖拽排序,我现在的项目是vue项目,所以我就屁颠屁颠的去百度有木有这样功能的插件,我就知道一定会有,那就是vuedraggable,这是一款很棒的拖拽插件,下面我来说一下怎么引入 首先在vue项目中,用npm包下载下来 npm install vuedraggable -S 下载下来后,引入插件,在你的vue文件的script标签里面这样引入 import draggable from 'vuedraggable' 别忘了下面要注册组件 components: { dr

  • vue.js或js实现中文A-Z排序的方法

    实现中文按照A-Z的方法,可以在vue的methods里面写入: methods:{ pySort:function(arr,empty){ var $this = this; if(!String.prototype.localeCompare) return null; var letters = "ABCDEFGHJKLMNOPQRSTWXYZ".split(''); var zh = "阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀".split('');

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

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

  • Vue数组更新及过滤排序功能

    前面的话 Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本.本文将详细介绍Vue数组更新及过滤排序 变异方法 Vue 包含一组观察数组的变异方法,它们将会触发视图更新,包含以下方法 push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度 pop() 从数组末尾移除最后一项,减少数组的length值,然后返回移除的项 shift() 移除数组中的第一个项并返回该项,同时数组的长度减1 unshift() 在数组前端添加任意个

  • Vue.js实现拖放效果的实例

    页面效果如下所示: 代码请看这里,当当当当: html: <template> <div class='drag-content'> <div class='project-content'> <div class='select-item' draggable='true' @dragstart='drag($event)' v-for='pjdt in projectdatas'>{{pjdt.name}}</div> </div>

  • Vue实现拖放排序功能的实例代码

    Vue中实现拖放排序,啥也不说,贴上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> ul { min-height: 100px; width: 200px; margin: 20px auto; backgrou

  • vue实现随机验证码功能的实例代码

    1.html代码 <div class="form-group" style="display: flex;"> <div> <span>验证码:</span> <input type="text" id="code" v-model="code" class="code" placeholder="请输入您的验证码&quo

  • vue router 用户登陆功能的实例代码

    有些路由页面需要用户登陆之后才能访问如(用户中心),如果用户没有登陆就访问这些页面的话就应该转换到登陆页面,登陆成功之后在进入该页面. 需要用到的知识点有:H5中的会话存储(sessionStorage).vue-router路由前置操作.路由元信息(meta). 路由配置 在路由页面中添加auth字段信息用于验证当前路由页面是否需要登陆. const router = new Router({ mode: 'history', base: process.env.BASE_URL, route

  • Android 实现文件夹排序功能的实例代码

    按文件名排序 /** * 按文件名排序 * @param filePath */ public static ArrayList<String> orderByName(String filePath) { ArrayList<String> FileNameList = new ArrayList<String>(); File file = new File(filePath); File[] files = file.listFiles(); List fileL

  • Angularjs添加排序查询功能的实例代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="angular-1.3.0.js"></script&g

  • Vue press 支持图片放大功能的实例代码

    介绍 VuePress 由两部分组成:一个以 Vue 驱动的主题系统的简约静态网站生成工具,和一个为编写技术文档而优化的默认主题.它是为了支持 Vue 子项目的文档需求而创建的. 由 VuePress 生成的每个页面,都具有相应的预渲染静态 HTML,它们能提供出色的加载性能,并且对 SEO 友好.然而,页面加载之后,Vue 就会将这些静态内容,接管为完整的单页面应用程序(SPA).当用户在浏览站点时,可以按需加载其他页面. 前两天接触到了 Vuepress ,颜值很高,界面简洁,容易上手.于是

  • vue中element-ui表格缩略图悬浮放大功能的实例代码

    element-ui界面非常简洁和美观,提供的组件可以满足绝大多数的应用场景,当表格中显示了图片的缩略图时,想要鼠标浮动在缩略图上时放大图片的效果,该如何实现呢?element-ui虽然没有直接提供图片悬浮放大的组件,但是可以使用Popover弹出框组件,一样实现效果,如下: 具体的代码(此处只是图片单元格的代码,其它代码省略): <el-table-column prop="picture" header-align="center" align="

  • Vue+Express实现登录注销功能的实例代码

    对Vue全家桶有基本的认知. 用有node环境 了解express 一丶业务分析 1.什么情况下进行权限验证? 访问敏感接口 前端向后端敏感接口发送ajax 后端进行session验证,并返回信息 前端axios拦截返回信息,根据返回信息进行操作 进行页面切换 页面切换,触发vue-router的路由守卫 路由守卫根据跳转地址进行验证,如需权限,则发送ajax至后端验证接口 后端验证接口进行session验证,返回信息 前端根据后端返回信息进行操作 2.前后端进行了怎么的交互? 登录 注销 二丶

  • vue cli使用融云实现聊天功能的实例代码

    先看下vue-cli的使用 1:安装node 2:npm i vue-cli -g npm install --global vue-cli 3:vue list 可以查看模板 4:选择一个模板,初始化项目,例如vue init webpack myPro 5:cd myPro  进入项目根目录 6:npm install    安装依赖 7:npm run dev   运行项目 正文开始 公司有个项目要实现一个聊天功能,需求如下图,略显随意 公司最终选择融云这个吊炸天的即时通信,文档详细的一匹

  • vue+django实现一对一聊天功能的实例代码

    vue+django实现一对一聊天和消息推送的功能.主要是通过websocket,由于Django不支持websocket,所以我使用了django-channels.考虑到存储量的问题,我并没有把聊天信息存入数据库,服务端的作用相当于一个中转站.我只讲述实现功能的结构性代码,具体的实现还请大家看源代码. 前端聊天界面 前端消息提醒界面 后端代码 效果展示 实现过程 后端 首先,我们需要先定义websocket的两条连接路径.ws/chat/xxx/(xxx指代聊天组)这条路径是当聊天双方都进入

随机推荐