• vue中原生H5拖拽排序_拖拽图片也是同样的道理

    原文地址【vue中原生H5拖拽排序_拖拽图片也是同样的道理】

    H5有基于拖拽的事件机制，如果你还不熟悉，请看我之前的文章【拖拽上传】中有介绍。

    原生拖拽API实现

    由于比较简单直接上代码了：

    DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>拖拽排序title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.min.js">script>
  <style>
    ul {
      clear: both;
      list-style: none;
      overflow: hidden;
    }

    li {
      cursor: pointer;
      float: left;
      height: 32px;
      line-height: 30px;
      padding: 0 10px;
      color: #409eff;
      border: 1px solid #d9ecff;
      background-color: #ecf5ff;
    }
  style>
head>

<body>
  <div id="app">div>
  <script>
    new Vue({
      template: `
      
    
        
    连词成句
    
        
      
          
    • {{item}}
      • 
        
    
      
    
          `    ,
      el: '#app',
      data() {
        return {
          oldWord: null,
          newWord: null,
          list: ["校长", "爷爷", "我", "给", "唱了首歌"]
        }
      },
      methods: {
        dragstart(word) {
          this.oldWord = word
        },
        // 记录移动过程中信息
        onDragEnter(word, e) {
          this.newWord = word
          e.preventDefault()
        },
        // 拖拽结束
        onDragEnd() {
          if (this.oldWord !== this.newWord) {
            let oldWordIndex = this.list.indexOf(this.oldWord);
            let newWordIndex = this.list.indexOf(this.newWord);
            let newList = [...this.list];

            // 删除老的节点
            newList.splice(oldWordIndex, 1);
            // 在列表中目标位置增加新的节点
            newList.splice(newWordIndex, 0, this.oldWord);
            this.list = [...newList];
          }

        }
      }
    })
      script>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80

    效果如下：

    请添加图片描述

    使用vuedraggable实现拖拽排序

    vuedraggable 是基于sortable.js实现的，所以需要先引入sortable.js，如果是npm安装的，则无需再引入。

    使用起来也比较简单，代码如下

    DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>拖拽排序title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.min.js">script>
  <script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js">script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js">script>
  <style>
    ul {
      clear: both;
      list-style: none;
      overflow: hidden;
    }

    li {
      cursor: pointer;
      float: left;
      height: 32px;
      line-height: 30px;
      padding: 0 10px;
      color: #409eff;
      border: 1px solid #d9ecff;
      background-color: #ecf5ff;
    }
  style>
head>

<body>
  <div id="app">div>
  <script>
    let draggable = vuedraggable;
    new Vue({
      components: {draggable},
      template: `
      
    
      
    连词成句
    
      
      
        
          
    • {{item}}
      • 
              
      
    
    
    
          `    ,
      el: '#app',
      data() {
        return {
          drag: false,
          list: ["校长", "爷爷", "我", "给", "唱了首歌"]
        }
      }
    })
      script>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59

    参考资料

  • 相关阅读:
    Web安全—Web漏扫工具OWASP ZAP安装与使用
    git 常用命令
    【码蹄集新手村 600 题】判断一个公元后的年份是否为闰年的方法
    AutoTrain：在Google Colab上微调LLM最简单的方法
    AI遮天传 ML/DL-感知机
    使用Postman调试API遇到“400 Bad Request”问题
    AVFrame结构体分析
    企业选型作业上常犯的一个错误
    持续部署的得力助手：探索LangChain支持的CD工具全景
    Test Module的创建及使用
  • 原文地址：https://blog.csdn.net/my_study_everyday/article/details/134543221