问不使用Sortable.js拖动的列表项
EN

Stack Overflow用户

提问于 2016-08-21 22:45:20

回答 2查看 1.6K关注 0票数 0

这里是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是一个非常整洁的库，这就是为什么我想让它工作得如此糟糕的原因。但我只是不知道自己做错了什么。

angularjs

rubaxa-sortable

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-08-23 09:32:32

问题是，您没有遵循可排序的角度文档。他们最近更改了项目，并将js与框架分离开来。首先，您需要包含lib和角排序库角-遗留-排序表。

Sortable.js 
ng-sortable.js

第二，在应用程序中注入模块“ng-sortable”。

然后，您可以通过指令在html中传递选项(如果需要的话)，或者在控制器中使用它。

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>

希望这能帮到你！

票数 1

Stack Overflow用户

发布于 2016-08-21 23:10:07

我想这里要做的是，你的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);