Question

使用AngularJS 我正在尝试拖动表格单元格。

例如，我想在表格单元格上删除“名称”标签，并希望跟踪哪些名称在哪些单元格上删除。 表格单元格由“row.col”跟踪。名称：xx下降1.2 =第1行。第2栏

tableDrop = {Id:1.2, Name:xx},{...},{...}

+-----------+-----------+-----------+
|           |Name:xx    |           |
|           |           |           |
|           |           |           |
+-----------+-----------+-----------+
|           |           |           |
|           |           |           |
|           |           |           |
+-----------+-----------+-----------+

可拖动标签/ DIV列表

    Name:xx
    Name:yy
    Name:ZZ

我试过了luckylooke / dragular＆amp; codef0rmer / angular-dragdrop插件。但无法实现上述情况。任何想法如何实现这一目标？

<body  ng-app="myApp">
    <div class='wrapper' ng-controller="IsContainerModel">
        <table border="1px">
            <tr ng-repeat="r in range(0,row)">
                <td  style="width: 100px; height: 100px"
                        ng-repeat="c in range(0,col)" ng-click="clickon(c+1,r+1)" >

                        <div class="ui-widget-content"><i>Cell ID={{getDataForID(c+1 , r+1)}}</i></div>

                        <div id="cart" class='containerVertical' style="border-color: red; border: solid">
                            <div class='cursorDefault' ng-repeat="item in cartModel">{{item.content}}
                                <button class='cursorDefault' ng-click="removeItem()">x</button>
                            </div>
                        </div>
                </td>
            </tr>
        </table>

        <div id="containerLeft" >
            <div ng-repeat="item in items1">{{item.content}}</div>
        </div>
    </div>


var app = angular.module('myApp', ['dragularModule' ])

angular.module("myApp").controller('IsContainerModel', ['$scope', '$element',     'dragularService', function TodoCtrl($scope, $element, dragularService) {

    $scope.items1 = [{
        content: 'Dept: Fic, Name: Bob'
    }, {
        content: 'Dept: Min, Name: Ian'
    }, {
        content: 'Dept: Hom, Name: Jack'
    }, {
        content: 'Dept: Tra, Name: Knut'
    }];

    $scope.cartModel = [];

    console.log("in here -->")

    var containerLeft = document.querySelector('#containerLeft');

    dragularService.cleanEnviroment();
    dragularService([containerLeft], {
        containersModel: [$scope.items1],
        copy: true,
        isContainer: function isContainer (el) {
            return el.id === 'cart';
        },
        isContainerModel: function getModel (){
            return $scope.cartModel;
        }
    });

    $scope.removeItem = function removeItem() {
        var index = $scope.cartModel.indexOf(this.item);
        $scope.cartModel.splice(index, 1);
    };



    /*
    Table
    * */





    $scope.row = 4;
    $scope.col = 6;

    $scope.range = function(min, max, step) {
        step = step || 1;
        var input = [];
        for (var i = min; i <= max; i += step) {
            input.push(i);
        }
        return input;
    };

    $scope.clickon = function(c,r){
        console.log(c +  ' / ' + r);
    }

    $scope.getDataForID = function (c,r){
        for(var i in $scope.data){
            if($scope.data[i]["id"]== c+'.'+r){
                return $scope.data[i]["teacherId"];
            }
        }
        return c+'.'+r
    }}])

Answer 1

考虑到你已经尝试了几个图书馆而且没有你想要的东西，我建议你自己写一个轮子。您可以使用jQuery的droppable函数来执行此操作。将这些代码放入Directive文件中。我知道将jQuery放入angularJS是好的甚至把所有的指令文件。但就个人而言，我更喜欢jQuery来处理拖放，享受简单性和灵活性。

function tableDirectiveFunction() {
  return {
    scope: {
      vm: '='
    },
    link: function(scope) {
      $("#rowmcoln").droppable({
        drop: function(event, ui) {
          tmpDOM = ui.draggable.clone();
          $("#rowmcoln").append(tmpDOM[0].innerHTML);
          $scope.$parent.$apply();
          vm.tableData[id(m, n)] = tmpDOM[0].innerHTML;
        }
      });
    }
  };
}

您的模板：

<div ng-controller="yourcontrollername">
  <div table-directive vm='vm'>
    <table>
      <tr><td id="rowmcoln"></td></tr>
    </table>
  </div>
</div>

...
<ul>
  <li>Name1</li>
</ul>

基本上，你给你的可拖动项目和删除区域id（或制作额外指令），并根据你的喜好进行DOM操作。

拖放表格内容并跟踪单元格值

1 个答案: