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


Posted in Javascript onJuly 08, 2019

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实现拖放排序功能的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
父子窗体间传递JSON格式的数据的代码
Dec 25 Javascript
jquery 回车事件实现代码
Aug 23 Javascript
Javascript之this关键字深入解析
Nov 12 Javascript
jQuery使用ajaxSubmit()提交表单示例
Apr 04 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
微信小程序链接传参并跳转新页面
Nov 29 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 Javascript
bootstrap multiselect下拉列表功能
Aug 22 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
如何能分清npm cnpm npx nvm
Jan 17 Javascript
VueX模块的具体使用(小白教程)
Jun 05 Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 Javascript
JavaScript中Dom操作实例详解
Jul 08 #Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 #Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 #Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 #Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 #Javascript
Vue中util的工具函数实例详解
Jul 08 #Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 #Javascript
You might like
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
PDO::errorInfo讲解
2019/01/28 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
动态刷新 dorado树的js代码
2009/06/12 Javascript
GreyBox技术总结(转)
2010/11/23 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
JavaScript正则表达式之multiline属性的应用
2015/06/16 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
Python中的choice()方法使用详解
2015/05/15 Python
深入浅析python的第三方库pandas
2020/02/13 Python
Python中的整除和取模实例
2020/06/03 Python
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
办公室保洁员岗位职责
2013/12/02 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
租车协议书范本2014
2014/11/17 职场文书
工资证明格式模板
2015/06/12 职场文书
vue里使用create, mounted调用方法
2022/04/26 Vue.js