基于angularjs的dragula拖动排序 表格

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

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

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

首先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);
        }else if(oldOrderIndex < newOrderIndex){  //向下拖
            $scope.tempDrugs.splice(newOrderIndex+1, 0, tempObj);
            $scope.tempDrugs.splice(oldOrderIndex, 1);
        }
       //这个排序只是我为了保险起见加的 也可以不加
        for(var i=0;i<$scope.tempDrugs.length;i++){
            $scope.tempDrugs[i].seq = i+1;
        }
    });
});

html：

这个id是上面js选择的id  

obj.seq就是前面html注意的地方  是这个序号显示的数字  因为从0开始 所以减去1

 

dragula下载地址：https://www.javascriptcn.com/go/?target=https%3A%2F%2Fgithub.com%2Fbevacqua%2Fdragula%2Farchive%2Fv3.7.2.tar.gz