拖放表格内容和跟踪单元格值答案

【问题标题】：Drag and drop table content and tracking cell value拖放表格内容和跟踪单元格值
【发布时间】：2016-01-17 19:03:19
【问题描述】：

使用 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 & 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
    }}])

【问题讨论】：

能把目前写的JS代码贴出来吗？
更新上面的代码 .. 使用 dragularModule .. 我认为如果 $scope.cartModel 使动态...而不是作为一组 cartModel ...它将起作用
能否请您提供现场剪辑，以便我可以帮助您实现目标？或者可以this example 对您有帮助吗？

标签： angularjs

【解决方案1】：

考虑到你已经尝试了几个库并且没有你想要的，我建议你自己写轮子。您可以使用 jQuery 的 droppable 函数来执行此操作。将这些代码放入指令文件。我知道将 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 操作。

【讨论】：