Question

Sortable.Js新手在这里，所以请温柔。

我尝试使用Sortable.js在我的页面中实现可排序列表。我在执行时没有收到任何错误，但是当我试图拖动我的列表项时，它们根本就没有移动。

这是我的HTML：

<ul id="forcedranking" class="wizard-contents-container-ul forcedRankCls" ng-show="isForcedRankingQuestion">
    <div class="answers-container">
        <div class="answer-child-container">
            <li ng-repeat="query in currentQuestionObject.choices | orderBy:['sequence','answer']" class="listModulePopup forcedRankingChoice" data-index="{{$index}}" ng-model="query.value"> 
                {{query.answer}}
            </li>
        </div>
    </div>
</ul>

这是我的JS：

/* Get current input type for Clear All checkbox activation */
    $scope.currentInputType = $scope.currentQuestionObject.inputType.toLowerCase();

    if ($scope.currentInputType == "forced ranking") {
        $scope.isForcedRankingQuestion = true;

        /*  SORTABLE FOR FORCED RANKING  */
        var mySort = document.getElementById("forcedranking");

        // forcedranking is my id for the <ul>
        var sortable = Sortable.create(forcedranking, {});

        // Tried setting this because I thought this was the culprit. Turns out it's not.
        sortable.option("disabled", false);

我这样调用了我的Sortable.js（在我的angularJS库下面）：

<script type="text/javascript" src="content1/carousel/Sortable.js"></script>

总的来说，我认为Sortable是一个非常整洁的库，这就是为什么我想让它工作得如此糟糕。但我不知道我在这里做错了什么。

Answer 1

问题是您没有关注可排序的角度文档。他们最近更改了项目并将js与框架分开。首先，您需要包含lib和角度可排序的lib angular-legacy-sortablejs

Sortable.js 
ng-sortable.js

第二次在您的应用中注入“ng-sortable”模块

然后你可以在html via指令中传递选项（如果你需要）或在控制器中使用它

<强> HTML：

<ul ng-sortable="{group: 'foobar'}"> 
    <li ng-repeat="query in currentQuestionObject.choices">{{query.answer}}</li>
</ul>

或者您可以使用选项传递控制器中声明的对象，例如：

$scope.sortableConfig = {
  group: 'collection',
  animation: 150,
  handle: '.handle',
  filter: '.inbox'
}

  <ul ng-sortable="sortableConfig">
    <li ng-repeat="collection in test">
      <div class="handle"></div>
        {{collection.name}}
    </li>
  </ul>

希望这对你有帮助！

Answer 2

我认为这里发生的事情是，在Angular完成渲染所有LI项目之前，你的JS正在执行，但是很难从你的JS片段中判断出来。

仅用于测试，如果更改这两行，请查看1秒后项目是否可拖动：

    /*  SORTABLE FOR FORCED RANKING  */
    var mySort = document.getElementById("forcedranking");

    // forcedranking is my id for the <ul>
    var sortable = Sortable.create(forcedranking, {});

进入这个：

window.setTimeout(function() {
    /*  SORTABLE FOR FORCED RANKING  */
    var mySort = document.getElementById("forcedranking");

    // forcedranking is my id for the <ul>
    var sortable = Sortable.create(forcedranking, {});
}, 1000);

此外，我不相信<div>元素是<ul>元素的有效子元素，因此这也可能是您的问题。如果Javascript更改什么都不做，那么您可能应该尝试更改html，以便<li>项是<ul>元素的直接子项。

希望这有帮助。

列出未使用Sortable.js拖动的项目

2 个答案: