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

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 在 Angular 完成渲染所有 LI 项目之前被执行，但是很难从你的 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> 元素的直接子元素。

希望这对您有所帮助。

Answer 2

问题是您没有遵循可排序的 angular 文档。他们最近更改了项目并将js与框架分开。所以首先你需要包含库和 angular 可排序库 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>

希望对您有所帮助！

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

List items not dragging using Sortable.js

angularjs

rubaxa-sortable