基于angularjs的dragula拖动排序表格

最新推荐文章于 2024-08-10 07:49:20 发布

爬呀爬

最新推荐文章于 2024-08-10 07:49:20 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_41777595/article/details/87920125

本文介绍如何使用AngularJS结合dragula库实现表格元素的拖动排序功能。内容包括简单的JavaScript代码实现和HTML结构说明，特别适合表格类型的拖动排序需求。读者可以通过留言提问或指正错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

其实实现的方法有很多种但是要根据你项目的需求来

可能我觉得我说明白了但是那只是我觉得我第一次写有什么问题可以留言有什么错误的或者不对的地方欢迎指正。。

这个只适用于表格类型的拖动。

首先js：

除开我写注释的和我的$scope变量剩下的都不用管其实还是比较简单的

dragula([document.getElementById("drag_item_auto")],  //这是id
    {
        removeOnSpill:false  //拖出你id（drag_item_auto）之外会回到你的原来的位置
    }).on("out",function (el) {
    var appElement = document.getElementById("drag_item_auto");
    var $scope = angular.element(appElement).scope();
    var newOrderIndex = el.rowIndex;  //获取你拖动的在表格中的位置
    var oldOrderIndex = el.children[0].innerText-1;  //注意这里 下面html会有解释
    $scope.$apply(function () {
        //下面都是一样 先保存你拖得那一行再删除插进去
        var tempObj = $scope.tempDrugs[oldOrderIndex];
        //往上拖  $scope.tempDrugs是你ng-repeat的数据
        if(oldOrderIndex > newOrderIndex){
            $scope.tempDrugs.splice(newOrderIndex, 0, tempObj);
            $scope.tempDrugs.splice(oldOrderIndex+1, 1);