Search code examples
angularjsrubaxa-sortable

List items not dragging using Sortable.js

Sortable.Js newbie here, so please be gentle.

I'm trying to implement a sortable list in my page using Sortable.js. I'm not getting any errors upon execution, however when I tried to drag my list items, they're not moving at all.

Here's my 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>

And here's my 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);

I called my Sortable.js like so (underneath my angularJS libraries):

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

Overall, I think Sortable's a really neat library, which is why I want to make it work so bad. But I just don't know what I'm doing wrong here.

Solution

  • The problem is you are not following the sortable angular documentation. They recently change the project and separated the js from the frameworks. So first you need to include the lib and the angular sortable lib angular-legacy-sortablejs

    Sortable.js 
ng-sortable.js

    Second inject the module 'ng-sortable' in your app

    Then you can pass the options (if you need to) in the html via directive or use it in the controller

    HTML:

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

    Or you can pass an object declared in your controller with the options, ex:

    $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>

    Hope this help you!