Question

此处有人曾尝试使用rubaxa 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>

这是我调用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消息。

我在这里做错了什么？

编辑按照Silvinus的要求，这里是Sortable的控制台日志：

更新1：找到this more detailed explanation about Sortable.js后，我修改了我的代码：

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

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

Answer 1

首先在这里检查我的答案List items not dragging using Sortable.js你有同样的问题，你没有正确使用角度。第二，你的html中存在一个很大的错误<ul>只能保留<li>你不应该把div包裹起来，这可能会在不同的浏览器中给你带来意想不到的结果，并且不是有效的html。

当你包含angular-legacy-sortablejs时，你不需要创建自定义指令，你将使用attr ng-sortable这样调用它：

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

阅读angular-legacy-sortablejs的文档，并记得包括sortable.js lib

在AngularJS中拖放排序 - ＆＃34; Sorting.create不是一个函数＆＃34;错误

1 个答案: