angularjs 拖拽实现方案

Posted 2023-04-27 小猪章鱼

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularjs 拖拽实现方案相关的知识，希望对你有一定的参考价值。

最近有一个拖拽排序的功能遍历后无法直接读取index 和 item。换了一种思路实现功能

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body ng-controller="demoController">
    <ul class="list">
        <li draggable="true" ng-repeat="li in arr track by $index" data-value="li.value" data-id="li.id">li.value$index</li>
    </ul>
    <button ng-click="save()">保存数据</button>
    
    <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
    <script src="/bundle.js"></script>
</body>

</html>

let app = angular.module(\'myApp\', []);
app.controller(\'demoController\', [\'$scope\', function($scope) 
  
    $scope.arr = [
        value: \'赵\',
        id: 1
    , 
        value: \'钱\',
        id: 2
    , 
        value: \'孙\',
        id: 3
    , 
        value: \'李\',
        id: 4
    , 
        value: \'周\',
        id: 5
    ];

    let list = document.querySelector(\'.list\')
    let currentLi;
   
    list.addEventListener(\'dragstart\', (e) => 
        e.dataTransfer.effectAllowed = \'move\'
        currentLi = e.target
        setTimeout(() => 
            currentLi.classList.add(\'moving\')
        )
    )

    list.addEventListener(\'dragenter\', (e) => 
        e.preventDefault()
        if (e.target === currentLi || e.target === list) 
            return
        
        let liArray = Array.from(list.childNodes)
        let currentIndex = liArray.indexOf(currentLi)
        let targetindex = liArray.indexOf(e.target)

        if (currentIndex < targetindex) 
            list.insertBefore(currentLi, e.target.nextElementSibling)
         else 
            list.insertBefore(currentLi, e.target)
        
    )

    list.addEventListener(\'dragover\', (e) => 
        e.preventDefault()
    )

    list.addEventListener(\'dragend\', (e) => 
        currentLi.classList.remove(\'moving\')
        
        //操作完毕赋值
        for (let k = 0; k < list.children.length; k++) 
            $scope.arr[k] = 
                value: list.children[k].dataset.value,
                id: list.children[k].dataset.id
            ;
        
    )

    $scope.save = function() 
        console.log($scope.arr)
    

]);

element+sortablejs插件实现拖拽排序效果

背景
1、后台管理系统中表格需要实现行拖拽功能
2、表格使用element组件库中el-table

方案介绍

1、Sortable.js
介绍：Sortable.js是一款轻量级的拖放排序列表的js插件
引用自官方文档：No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Knockout and any CSS library, e.g. Bootstrap.
参考地址： https://github.com/SortableJS/Sortable

2、vuedraggable
介绍：基于Sortable.js的vue组件，用以实现拖拽功能
引用自官方文档：Vue drag-and-drop component based on Sortable.js
参考地址： https://github.com/SortableJS/Vue.Draggable

遇到的问题
在使用vuedraggable的过程中，发现必须用包裹拖动项的父级元素，但是element组件库对table进行封装，无法直接包裹拖动项（即tr）的父级元素

如果你的项目中，表格未使用组件库，实现可以参考 https://www.jb51.net/article/162648.htm

解决方案
使用 sortable.js
步骤一：安装

npm install sortablejs --save

步骤二：引入（在main中全局引入或者需要的组件页面引入）

import Sortable from ‘sortablejs‘ //按需引入

步骤三： el-table 添加row-key属性

<el-table :data="data" border class="table" row-key="id" ref="dragTable" highlight-current-row>
    <el-table-column prop="id" label="序号" align="center">
    </el-table-column>
    <el-table-column prop="title" label="标题" align="center">
    </el-table-column>
</el-table>

步骤四：将拖拽元素设置为要拖动项的父级元素

mounted() {
    // 表格中需要实现行拖动，所以选中tr的父级元素
    const table = document.querySelector(‘.el-table__body-wrapper tbody‘)
    const self = this
    Sortable.create(table, {
        onEnd({ newIndex, oldIndex }) {
            console.log(newIndex, oldIndex)
            const targetRow = self.resourceList.splice(oldIndex, 1)[0]
            self.resourceList.splice(newIndex, 0, targetRow)
        }
    })
}

plan b：

mounted(){
    this.setSort();//拖拽
},
methods: {
    setSort(){
        // 表格中需要实现行拖动，所以选中tr的父级元素
        const el = this.$refs.dragTable.$el.querySelectorAll(‘.el-table__body-wrapper > table > tbody‘)[0] // table
        this.sortable = Sortable.create(el,{
            ghostClass:‘sortable-ghost‘,
            setData:function(dataTransfer){
                dataTransfer.setData(‘Text‘, ‘‘)
            },
            onEnd: evt => {
                // console.log(this.data) //:data="data" 所有数据
                const targetRow = this.data.splice(evt.oldIndex, 1)[0]; // this.data是表格所有数据
                // console.log(targetRow) // 挪动是单个数据
                this.data.splice(evt.newIndex, 0, targetRow);
            }
        })
    },
}

借鉴文章：https://www.zhangshengrong.com/p/2EaE06yO1M/

以上是关于angularjs 拖拽实现方案的主要内容，如果未能解决你的问题，请参考以下文章

结构-行为-样式 - Angularjs 环境下Ztree结合JqueryUI实现拖拽

angularjs，vue之类的框架如何实现可视化拖拽室组件开发，效率比手写高很多倍？

element+sortablejs插件实现拖拽排序效果

Html5 拖拽行为和AngularJs的结合

ngDraggable简单使用及实现拖拽排序

Createjs学习心得之使用EaselJs实现拖拽效果