AngularJS中的拖放排序-- "Sorting.create不是函数“错误

Question

这里有谁试过用卢巴沙做Sortable.js的吗？我目前正在尝试使用这个库创建一个可排序的列表，但没有成功。

我之所以选择这个库是因为它不使用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>

这是我的代码叫可排序。我从上面的链接上得到的。我是在自定义指令中调用这个命令的。

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消息。

我在这里做错什么了？

按照Silvinus的请求，编辑，下面是可排序的控制台日志：

​

更新1:在找到关于Sortable.js的更详细的解释之后，我修改了代码如下：

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

它不再返回错误，但当我拖动它们时，我的项目不会移动。我还漏掉了什么吗？

Answer 1

首先，检查我的答案，不使用Sortable.js拖动的列表项，你有同样的问题，你没有正确地使用它的角度。其次，您的html中有一个很大的错误，<ul>只能容纳<li>，您不应该放置一个div来包装li的，这会在不同的浏览器中给出意想不到的结果，而且是无效的。

当您包含角-遗留-排序表时，您将不需要创建您的自定义指令，您将使用attr排序命令调用它，如下所示：

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

在角遗留-sortablejs文档中读一读，并记住也包括sortable.js库。