За последние 24 часа нас посетили 20195 программистов и 1079 роботов. Сейчас ищут 690 программистов ...

Drag & drop на AngularJS

Тема в разделе "JavaScript и AJAX", создана пользователем Walk, 24 янв 2019.

  1. Walk

    Walk Активный пользователь

    С нами с:
    7 сен 2008
    Сообщения:
    452
    Симпатии:
    86
    Я ни разу не фронт, но нужно сейчас сделать перетаскивание элементов в списке, на проекте, который написан на AngularJS 1.6

    Уже есть готовые примеры с подобным функционалом:
    http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple

    Но банально скопировать данный пример и сделать его локально - не могу. Пример подразумевает, что посетитель разбирается в ангуляре.

    В общем у меня получается что-то такое:

    HTML:
    1.  
    2. <!doctype html>
    3.     <meta charset="utf-8">
    4.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    5.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    6.     <link rel="stylesheet" href="drag_and_drop.css">
    7. </head>
    8. <body ng-app="demo">
    9.  
    10. <ul dnd-list="list">
    11.     <li ng-repeat="item in list"
    12.        dnd-draggable="item"
    13.        dnd-moved="list.splice($index, 1)"
    14.        dnd-effect-allowed="move"
    15.        dnd-selected="models.selected = item"
    16.        ng-class="{'selected': models.selected === item}"
    17.    >
    18.         {{item.label}}
    19.     </li>
    20. </ul>
    21.     angular.module("demo").controller("SimpleDemoController", function($scope) {
    22.  
    23.         $scope.models = {
    24.             "selected": null,
    25.             "lists": {
    26.                 "A": [
    27.                     {
    28.                         "label": "Item A1"
    29.                     },
    30.                     {
    31.                         "label": "Item A2"
    32.                     },
    33.                     {
    34.                         "label": "Item A3"
    35.                     }
    36.                 ],
    37.                 "B": [
    38.                     {
    39.                         "label": "Item B3"
    40.                     },
    41.                     {
    42.                         "label": "Item B2"
    43.                     },
    44.                     {
    45.                         "label": "Item B1"
    46.                     }
    47.                 ]
    48.             }
    49.         };
    50.  
    51.         // Generate initial model
    52.         for (var i = 1; i <= 3; ++i) {
    53.            $scope.models.lists.A.push({label: "Item A" + i});
    54.            $scope.models.lists.B.push({label: "Item B" + i});
    55.        }
    56.  
    57.        // Model to JSON for demo purpose
    58.        $scope.$watch('models', function(model) {
    59.            $scope.modelAsJson = angular.toJson(model, true);
    60.        }, true);
    61.  
    62.    });
    63. </body>
    64. </html>
    65.  
    И получаю такие ошибки:
    1) Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.6.4/$injector/nomod?p0=demo
    2) Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.4/$injector/modulerr?p0=demo

    Кто разбирается в AngularJS - приведите пример работающей локально страницы с примером из http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple

    P.S. Вытащить код с гитхаба также не получается - автор запихал все свои примеры в один большой связанный проект.
     
    #1 Walk, 24 янв 2019
    Последнее редактирование: 24 янв 2019