Перетащите сортировку в AngularJS - ошибка «Sorting.create is not function»

0

Кто-нибудь здесь, кто пытался Sortable.js от rubaxa? В настоящее время я пытаюсь создать отсортированный список, используя эту библиотеку без успеха.

Причина, почему я выбрал эту библиотеку, состоял в том, что она не использует jQuery.

Это мой HTML:

<!-- FORCED RANKING QUESTION TYPE -->
    <ul id="forcedranking" class="wizard-contents-container-ul" ng-model="currentQuestionObject.choices" ng-show="isForcedRankingQuestion">
        <div class="answers-container">

            <li ng-repeat="query in currentQuestionObject.choices | orderBy:['sequence','answer']" class="listModulePopup forcedRankingChoice"> 
                {{query.answer}}
            </li>

            <div class="buttons-container">
                <div class="carousel-wizard-btn-container">
                    <div class="carousel-wizard-buttons" ng-click="wizardPrevious()" ng-hide="currentQuestionIndex == 0">Previous</div>
                    <div class="carousel-wizard-buttons" ng-click="disableWizardFeatures() || wizardNext()" ng-hide="currentQuestionIndex == wizardQuestionSet.length - 1" ng-disabled="showWelcomeMessage === true ? false : disableWizardFeatures()">Next</div>
                    <div class="carousel-wizard-buttons" ng-click="disableWizardFeatures() || showResults() " ng-show="currentQuestionIndex == wizardQuestionSet.length - 1" ng-disabled="disableWizardFeatures()">Finish</div>
                </div>
            </div>         
        </div>
    </ul>

И это мой код, который вызывает Sortable. Я получил его из приведенной выше ссылки. Я называю это внутри пользовательской директивы.

angular.module('myModule')
    .directive('myCustomModal', function() {
    return {
        restrict: 'E',
        scope: '',
        replace: true,                                                  // replace with custom template
        transclude: true,                                               // insert custom content inside directive
        controller: function($scope, $filter, $state, spService, spHelper, itemContainer, ngDialog,  $http) {

    // Other functions go here   


    /*  Drag and drop for forced ranking  */
    var list = document.getElementById("forcedranking");
    Sortable.create(list);          // call Sortable.js

   // ...

Я уже назвал библиотеку на главной странице HTML. Однако, когда я запускал свое приложение, я получил TypeError: Sortable.create is not a function сообщением TypeError: Sortable.create is not a function.

Что я здесь делаю неправильно?

РЕДАКТИРОВАТЬ В соответствии с просьбой Сильвинуса, вот консольный журнал Sortable: Изображение 174551

ОБНОВЛЕНИЕ 1: после того, как вы нашли это более подробное объяснение относительно Sortable.js, я пересмотрел свой код следующим образом:

   /*  SORTABLE FOR FORCED RANKING  */
   // var list = document.getElementById("forcedranking");
   Sortable.create(forcedranking, {});  

Он больше не возвращает ошибку, но мои элементы не будут перемещаться, когда я их перетаскиваю. Я что-то пропустил?

  • 0
    Можете ли вы сделать console.log из Sortable объекта? -> console.log (сортируемый); И выложите журнал пожалуйста
  • 0
    Привет, Сильвин, я отредактировал свой пост, добавив скриншот журнала.
Показать ещё 6 комментариев
Теги:
rubaxa-sortable

1 ответ

0

Прежде всего проверьте мой ответ здесь. Элементы списка, не перетаскивающие с помощью Sortable.js, у вас такая же проблема, вы не используете ее правильно с угловым. Во-вторых, большая ошибка в вашем html <ul> может содержать только <li> вы не должны помещать div-упаковку li, это может дать вам неожиданные результаты в разных браузерах и недействительно html.

Когда вы включаете угловое-legacy-sortablejs, вам не нужно будет создавать свою настраиваемую директиву, и вы будете называть ее с помощью сортировки, подобной следующей:

<ul ng-sortable>
   <li ng-repeat="item in items">{{item}}</li>
</ul>

Прочитайте в документе угловые-унаследованные сортировки и не забудьте включить sortable.js lib тоже

  • 0
    Спасибо за это. Пользовательская директива (которая является модальной) необходима, потому что она должна вызываться в разных частях сайта. <div> используются для вызова CSS-классов, необходимых для того, чтобы сделать страницу отзывчивой. Я понимаю, что структура HTML неортодоксальна, но мы должны были следовать разработанным для нее проектам. В любом случае, это уже было решено в ссылке SO, которую вы упомянули. Тем не менее, спасибо, что нашли время, чтобы ответить. :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню