列表項不使用Sortable.js

Sortable.Js新手在這裏，所以請溫柔。列表項不使用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是一個非常整潔的圖書館，這就是爲什麼我想讓它工作如此糟糕的原因。但我只是不知道我在這裏做錯了什麼。

來源

2016-08-22 Dee J.

問題是你沒有遵循可排序的角度文檔。他們最近改變了項目並將js從框架中分離出來。所以，首先你需要包括lib和在你的應用程序的角度排序的lib angular-legacy-sortablejs

Sortable.js 
ng-sortable.js

二注入模塊「NG-排序」

然後，你可以通過選項（如果需要）在通過指令中的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>

希望這有助於你！

來源

2016-08-23 17:32:32 Octavioamu

阿哈哈，這是因爲文件混淆了我。但是，是的，調用ng-sortable就是這麼做的。謝謝！ –

我想這裏發生的事情是你的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>元素的直接子項。

希望這會有所幫助。

來源

2016-08-22 07:10:07 Robba

列表項不使用Sortable.js

回答

相關問題