网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑:jimmy 日期: 2024/11/2 浏览:3 次 )

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="/UploadFiles/2021-04-02/vue.min.js">

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定时器设置、使用与倒计时案例详解
下一篇:JavaScript中Dom操作实例详解
微软与英特尔等合作伙伴联合定义“AI PC”:键盘需配有Copilot物理按键
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 SiteMap