Question

Angular中的新内容，我想要创建的链接。控制台中没有错误，也没有显示结果。我的要求略有不同，但这需要成为主干，但却无法完成。我想要两个表之间的拖放功能，也不应该是可排序的。如果正在从任何表中拖动项目，则应将其放在另一个表中，并且不应允许排序。多选也应该是可能的，如下面的链接。不知道我做错了什么

https://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/multi

HTML

＆＃13;

var app = angular.module('demo',['dndLists']);
app.controller("MultiDemoController", function($scope) {
 $scope.list = [
  {
    "listName": "A",
    "items": [
      {
        "label": "Item A1"
      },
      {
        "label": "Item A2"
      },
      {
        "label": "Item A3"
      },
      {
        "label": "Item A4"
      }
    ],
    "dragging": false
  },
  {
    "listName": "B",
    "items": [
      {
        "label": "Item B1"
      },
      {
        "label": "Item B2"
      },
      {
        "label": "Item B3"
      },
      {
        "label": "Item B4"
      }
    ],
    "dragging": false
  }
];
    $scope.models = [
      {listName: "A", items: [], dragging: false},
      {listName: "B", items: [], dragging: false}
    ];
   
    /**
     * dnd-dragging determines what data gets serialized and send to the receiver
     * of the drop. While we usually just send a single object, we send the array
     * of all selected items here.
     */
    $scope.getSelectedItemsIncluding = function(list, item) {
      item.selected = true;
      return list.items.filter(function(item) { return item.selected; });
    };

    /**
     * We set the list into dragging state, meaning the items that are being
     * dragged are hidden. We also use the HTML5 API directly to set a custom
     * image, since otherwise only the one item that the user actually dragged
     * would be shown as drag image.
     */
    $scope.onDragstart = function(list, event) {
       list.dragging = true;
       if (event.dataTransfer.setDragImage) {
         var img = new Image();
         img.src = 'framework/vendor/ic_content_copy_black_24dp_2x.png';
         event.dataTransfer.setDragImage(img, 0, 0);
       }
    };

    /**
     * In the dnd-drop callback, we now have to handle the data array that we
     * sent above. We handle the insertion into the list ourselves. By returning
     * true, the dnd-list directive won't do the insertion itself.
     */
    $scope.onDrop = function(list, items, index) {
      angular.forEach(items, function(item) { item.selected = false; });
      list.items = list.items.slice(0, index)
                  .concat(items)
                  .concat(list.items.slice(index));
      return true;
    }

    /**
     * Last but not least, we have to remove the previously dragged items in the
     * dnd-moved callback.
     */
    $scope.onMoved = function(list) {
      list.items = list.items.filter(function(item) { return !item.selected; });
    };

    // Generate the initial model
    angular.forEach($scope.models, function(list) {
      for (var i = 1; i <= 4; ++i) {
          list.items.push({label: "Item " + list.listName + i});
      }
    });

    // Model to JSON for demo purpose
    $scope.$watch('models', function(model) {
        $scope.modelAsJson = angular.toJson(model, true);
    }, true);

});

＆＃13;

/**
 * The dnd-list should always have a min-height,
 * otherwise you can't drop into it once it's empty
 */
.multiDemo ul[dnd-list] {
    min-height: 42px;
    padding-left: 0px;
}

/**
 * An element with .dndPlaceholder class will be
 * added to the dnd-list while the user is dragging
 * over it.
 */
.multiDemo ul[dnd-list] .dndPlaceholder {
    background-color: #ddd;
    display: block;
    min-height: 42px;
}

.multiDemo ul[dnd-list] li {
    background-color: #fff;
    border: 1px solid #ddd;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    display: block;
    margin-bottom: -1px;
    padding: 10px 15px;
}

/**
 * Show selected elements in green
 */
.multiDemo ul[dnd-list] li.selected {
    background-color: #dff0d8;
    color: #3c763d;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
<title>Drag &amp; Drop Lists for angular.js</title>

    <!-- jQuery is not required -->
    <!-- <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> -->

    <!-- angular is the only dependency! -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-drag-and-drop-lists/2.1.0/angular-drag-and-drop-lists.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
<body ng-app="demo">
<div ng-controller = 'MultiDemoController'>
<!-- your widget template -->
 <ul dnd-list='' dnd-drop="onDrop(list, item, index)">
    <li ng-repeat="item in list.items"
        dnd-draggable="getSelectedItemsIncluding(list, item)"
        dnd-dragstart="onDragstart(list, event)"
        dnd-moved="onMoved(list)"
        dnd-dragend="list.dragging = false"
        dnd-selected="item.selected = !item.selected"
        ng-class="{'selected': item.selected}"
        ng-hide="item.selected">
        {{item.label}}
    </li>
</ul>
	</div>
	</body>
	</html>

＆＃13;

Answer 1

我发现为什么它无效。

由于文档很差，他们错过了一件重要的事情

看看http://joxi.ru/5mdYR6jikPO892（截图）

问题是你错过了html中的ng-repeat

 ...
 <div ng-repeat="listItem in list" class="col-md-6 ng-scope">
     <ul dnd-list="list">
       <li ng-repeat="item in listItem.items"
           ...

Example JSFiddle

使用Angular 1拖放

1 个答案: