Drag and Drop on AngularJS - why doesn't it work?

H

HellWalk2019-02-04 17:36:50

JavaScript

HellWalk, 2019-02-04 17:36:50

There is a simple example of how to implement the functionality of dragging items in a list:
marceljuenemann.github.io/angular-drag-and-drop-li...
I'm trying to implement it (everything on one page - easy to copy and see), but it doesn't work:

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>Drag and Drop</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <style>
        .simpleDemo ul[dnd-list] {
            min-height: 42px;
            padding-left: 0;
        }
        .simpleDemo ul[dnd-list] .dndDraggingSource {
            display: none;
        }
        .simpleDemo ul[dnd-list] .dndPlaceholder {
            background-color: #ddd;
            display: block;
            min-height: 42px;
        }
        .simpleDemo ul[dnd-list] li {
            background-color: #fff;
            border: 1px solid #ddd;
            border-top-right-radius: 4px;
            border-top-left-radius: 4px;
            display: block;
            padding: 10px 15px;
            margin-bottom: -1px;
        }
        .simpleDemo ul[dnd-list] li.selected {
            background-color: #dff0d8;
            color: #3c763d;
        }
    </style>
</head>
<body>
<div ng-controller="DemoController">
    <ul dnd-list="list">
        <li ng-repeat="item in list"
            dnd-draggable="item"
            dnd-moved="list.splice($index, 1)"
            dnd-effect-allowed="move"
            dnd-selected="models.selected = item"
            ng-class="{'selected': models.selected === item}"
        >
            {{item.label}}
        </li>
    </ul>
</div>
<script>
  var app = angular.module('app', []);
  app.controller('DemoController', function ($scope) {

    $scope.models = {
      selected: null,
      lists: {"A": [
          {
            "label": "Item A1"
          },
          {
            "label": "Item A2"
          },
          {
            "label": "Item A3"
          }
        ], "B": [
          {
            "label": "Item B1"
          },
          {
            "label": "Item B2"
          },
          {
            "label": "Item B3"
          }
        ]}
    };

    for (var i = 1; i <= 3; ++i) {
      $scope.models.lists.A.push({label: "Item A" + i});
      $scope.models.lists.B.push({label: "Item B" + i});
    }

    $scope.$watch('models', function(model) {
      $scope.modelAsJson = angular.toJson(model, true);
    }, true);

  });
</script>
</body>
</html>

Can anyone suggest what is wrong?

Reply

Answer the question

In order to leave comments, you need to log in

0 answer(s)