前端实现拖拽排序效果_bling flower的博客-程序员秘密_前端拖动排序

技术标签: 前端  es6  javascript  

<template>
  <div>
    <div>dom拖拽功能的实现</div>
    <div class="link-add">
      <div class="formTitle">流程步骤</div>
      <div class="link-add-list">
        <div
          class="test_wrapper"
          @dragover="dragover($event)"
          v-if="
            recordProcessList &&
            recordProcessList.length > 0
          "
        >
          <transition-group class="transition-wrapper" name="sort">
            <div
              v-for="(item, itemIndex) in recordProcessList"
              :key="item.sort"
              :draggable="true"
              @dragstart="dragstart(item)"
              @dragenter="dragenter(item, $event)"
              @dragend="dragend(item, $event)"
              @dragover="dragover($event)"
              style="transition: transform 0.3s"
            >
              <el-input
                v-model="item.name"
                @click.native="clickLinkItem(itemIndex)"
                class="link-add-list-detail"
                :class="{ activeItem: itemIndex == digit }"
              >
                <el-button slot="prepend" icon="el-icon-s-unfold"></el-button>
                <el-button
                  slot="append"
                  icon="el-icon-delete"
                  @click="delLinkItem(itemIndex)"
                ></el-button>
              </el-input>
            </div>
          </transition-group>
        </div>
        <div
          v-else
          style="
            height: 60px;
            text-align: center;
            line-height: 50px;
            color: #909399;
          "
        >
          <span>暂未新增任何环节</span>
        </div>
        <el-button
          size="mini"
          style="width: 100%; background-color: #e8ecef"
          @click="addLink"
          ><i class="el-icon-circle-plus"></i>&nbsp;新增</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
    
  data() {
    
    return {
    
      recordProcessList: [
        {
    
          sort: 1,
          name: '步骤1',
        },
        {
    
          sort: 2,
          name: '步骤2',
        },
        {
    
          sort: 3,
          name: '步骤3',
        },
      ],
      digit: 0,
      //开始排序时按住的旧数据
      oldData: '',
      // 拖拽过程的数据
      newData: '',
      obj:{
    
        name:'未命名',sort:''
      }
    }
  },
  methods: {
    
    //点击单条环节
    clickLinkItem(index) {
    
      this.digit = index
    },
    dragstart(value) {
    
      this.oldData = value
      console.log(value, '这是旧的数据')
    },
    // 记录移动过程中信息
    dragenter(value, e) {
    
      this.newData = value
      console.log(value, '这是移动过程中的数据')
      e.preventDefault()
    },
    // 拖拽最终操作
    dragend(value, e) {
    
      if (this.oldData !== this.newData) {
    
        let oldIndex = this.recordProcessList.indexOf(this.oldData)
        let newIndex = this.recordProcessList.indexOf(this.newData)
        console.log(oldIndex, '老的', newIndex, '新的')
        let newItems = [...this.recordProcessList]
        // 删除老的节点
        newItems.splice(oldIndex, 1)
        // 在列表中目标位置增加新的节点
        newItems.splice(newIndex, 0, this.oldData) //在位置newIndex位置添加一个this.oldData,并删除0个数据
        this.recordProcessList = [...newItems]
      }
    },
    // 拖动事件(主要是为了拖动时鼠标光标不变为禁止)
    dragover(e) {
    
      e.preventDefault()
    },
    //点击单条环节
    clickLinkItem(index) {
    
      this.digit = index
    },
    //设置sort
    setSort() {
    
      this.recordProcessList.forEach((element, eleInedx) => {
    
        element.sort = eleInedx + 1;
      });
    },
    // 添加环节
    addLink() {
    
      this.setSort()
      //方法1:
      this.obj.sort = this.recordProcessList.length + 1
      this.recordProcessList.push(
        JSON.parse(JSON.stringify(this.obj))
      );
      //方法2:
      // this.recordProcessList.push({
    
      //   name:'未命名',sort:this.recordProcessList.length + 1
      // })
      console.log(this.recordProcessList)
    },
    //删除单个环节
    delLinkItem(index) {
    
      if (this.recordProcessList.length == 1) {
    
        alert('已经是最后一条了哦')
        return
      }
      if (index > this.digit) {
    
        this.digit = 0;
      }
      this.recordProcessList.splice(index, 1)
    },
  },
}
</script>
<style lang="scss" scoped>
.link-add {
    
  width: 300px;
  background-color: white;
  margin-right: 6px;
  padding: 8px 15px;
  &-list {
    
    padding: 8px;
  }
  .activeItem {
    
    background-color: #e8ecef;
  }
}
</style>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/C05230/article/details/121359531

智能推荐

适合的才是最好的-RxJava篇_海重山青的博客-程序员秘密

对于程序猿来说,Demo是最好的起手。而对于RxJava来说,你可以简单理解成:是一个观察者模式框架替代AsyncTask成为更好的异步操作工具即便逻辑再复杂,对于RxJava来说就是:简洁首先上Demo:public static void main(String[] args) { // 0.准备一些数据 Integer[] numbers = { 1,

linux gem手动安装_颜敏的博客-程序员秘密_linux 安装gem

欢迎访问我的个人博客网站:http://www.yanmin99.com/ 一、rubygems官网下载源码 wget https://rubygems.org/rubygems/rubygems-2.6.12.zip 二、解压源码文件 unzip rubygems-2.6.12.zip 三、安装 cd rubygems-2.6.12 sudo ruby setup.rb

图的最短路径——Bellman-Ford算法(未优化)_秃头蒋小凡要coding的博客-程序员秘密

Dijkstra算法能解决单源最短路径问题,即一个顶点到其它所有顶点的最短路径但如果有负权边,则dis所确定的该顶点到其它某一个顶点的确定值会改变,无法解决负权变的问题Bellman-Ford算法可以有效解决负权边的问题Bellman-Ford算法原理:使用邻接表存储每一条边的信息,即U为起始顶点,V为终止顶点,W为权值首先初始化源点到各个顶点的距离dis再进行对各边的松弛,此步和Dijkstra算法相同//以1为源点为例//对每一条边进行松弛for(int i=1;i&lt;=m;i++

ngrok配置_有金的博客-程序员秘密

server_addr: "opzoonface.com:4443"trust_host_root_certs: falsetunnels:  saas:    subdomain: "wangjing"    proto:      http: 8080  image:    subdomain: "image.wangjing"    proto:

2021年的第一盆冷水:有人说别太把图神经网络当回事儿_人工智能学家的博客-程序员秘密

来源:数学中国图神经网络(GNN)是机器学习中最热门的领域之一,在过去短短数月内就有多篇优秀的综述论文。但数据科学家 Matt Ranger 对 GNN 却并不感冒。他认为这方面的研究会...

org.springframework.web.servlet.FrameworkServlet 470 initServletBean - Context initialization failed_Jack魏的博客-程序员秘密

信息: Initializing Spring FrameworkServlet 'springmvc'2019-02-21 09:41:29.928 ERROR org.springframework.web.servlet.FrameworkServlet 470 initServletBean - Context initialization failed org.springframew...

随便推点

理解vue中的插槽------slot与slot-scope_IT 哈的博客-程序员秘密

vue当中的插槽,指的即是slot,是组件当中的一块HTML模板。该模板是否显示,以及如何显示由其父组件说了算。不过插槽显示的位置是由子组件决定 ,你将slot写在组件template的哪块,父组件传过来的模板将来就显示在哪块!单个插槽单个插槽是vue官方的叫法。你也可以叫它默认插槽。另外因为该插槽不用设置name属性,也可以称其为匿名插槽。先来看一个例子。父组件:&l...

【软考总结】——知识产权_chouxian0781的博客-程序员秘密

这一部分虽然在软考过程中比例很少,但是想要在软考中的高分,这部分相对其他内容还是比较简单的。下面小编主要是结合自己在软考复习过程遇到的一些问题进行整理。 著作权 著作权:指文学,艺术,自然科学,社会科学和工程技术领域内具有独创性并能以某种有形形式复制的...

css - ime-mode属性_Alan_阿兰的博客-程序员秘密_ime-mode:inactive

作用用css实现关闭文本框输入法语法:ime-mode : auto | active | inactive | disabled取值:auto : 默认值。不影响ime的状态。与不指定 ime-mode 属性时相同active : 指定所有使用ime输入的字符。即激活本地语言输入法。用户仍可以撤销激活imeinactive : 指定所有不使用ime输入的字符。即激活非

python遇到的问题与解决_luozhonghua2000的博客-程序员秘密

1、   No module named 'requests'解决方法解决方法:由于我安装的python的时候,也选择安装了pip,所以这里只分享自己实践过的方式。我的python安装的目录是D:/Python①cmd ②cd D:/Python③pip install requests 等待系统自动加载安装。 2、ImportError: No modul

磁盘备份及raid0和raid10的组建_ZZULI_Lucas的博客-程序员秘密_raid0 备份

blkid 查询各个设备UUIDmount -U ‘UUID’ 加挂载点 挂载设备umount /mnt/sdb1 卸载挂载设备sdb1(无占用)lsof /mnt/sdb1 有用户占用时,查询sdb1占用进程和用户fuser -km /mnt/sdb1 结束sdb1的所有占用cat /proc/mounts 查询所有的挂载点umount -o remount +挂载点 重新...

用产品思维设计API(一)——RESTful就是个骗局_北漂周的博客-程序员秘密

用产品思维设计API(一)——RESTful就是个骗局前言 最近公司内部在重构项目代码,包括API方向的重构,期间遇到了很多的问题,不由得让我重新思考了下。 - 一个优雅的API该如何设计? - 前后端分离之后,API真的解耦分离了吗? - 不断的版本迭代,API的兼容性该如何做?年前,我司内部的接口已经进入了一个完全的重构阶段,参考了市面上各大平台的API和文档,自己也总结

推荐文章

热门文章

相关标签