Why is Angular sortable-ui not working??

Question

JavaScript

Hello everyone, this is the question. I wanted drag&drop sorting. I am writing using AngularJS, and in order for sorting to immediately change the model, I decided to use the sortable-ui module. I downloaded the required js, included jQuery, jQuery-UI and sortable.js:

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="{% static 'js/lib/jquery-ui-1.10.4.custom.js' %}"></script>
<script src="{% static 'js/lib/angular.min.js' %}"></script>
<script src="{% static 'js/lib/sortable.js' %}"></script>

to the page. Specified 'ui.sortable' as a dependency of his application:

angular.module('LookstatApp', ['ngCookies', 'ngRoute', 'ui.sortable'])

on the page I do everything according to this instruction:

<div class="row">
    <ul class="select-multiple blue-border" ui-sortable ng-model="admins">
  <li ng-repeat="a in admins">{$ a.name $}</li>
    </ul>
</div>

In the application code, the admins model looks like this (purely for example):

$scope.admins = [
  {id: 1, name: "Админ 1"},
  {id: 2, name: "Админ 2"},
  {id: 3, name: "Админ 3"},
  {id: 4, name: "Админ 4"},
  {id: 5, name: "Админ 5"},
];

And as a result, when the page is opened, the drag&drop does not work, and the following output is spit out into the console:

TypeError: undefined is not a function
    at link (http://127.0.0.1:8000/static/js/lib/sortable.js:257:19)
    at K (http://127.0.0.1:8000/static/js/lib/angular.min.js:54:390)
    at f (http://127.0.0.1:8000/static/js/lib/angular.min.js:47:261)
    at f (http://127.0.0.1:8000/static/js/lib/angular.min.js:47:278)
    at f (http://127.0.0.1:8000/static/js/lib/angular.min.js:47:278)
    at f (http://127.0.0.1:8000/static/js/lib/angular.min.js:47:278)
    at http://127.0.0.1:8000/static/js/lib/angular.min.js:46:377
    at link (http://127.0.0.1:8000/static/js/lib/angular-route.min.js:7:388)
    at K (http://127.0.0.1:8000/static/js/lib/angular.min.js:54:390)
    at f (http://127.0.0.1:8000/static/js/lib/angular.min.js:47:261) <ul class="select-multiple blue-border ng-pristine ng-valid" ui-sortable="" ng-model="admins"> angular.min.js:92

Angular's standard template delimiters have been replaced with "{$" and "$}" so as not to conflict with Django's templating engine, just in case. Thanks in advance!

Answer 1

Try ng-sortable .