List items not dragging using Sortable.js

Question

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.

Answer 1

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!

Answer 2

I think what's going on here is that your JS is being executed before Angular is done rendering all the LI items, but it's hard to tell from your snippet of JS.

Just for testing, see if the items become draggable after 1 second if you change these two lines:

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

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

into this:

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);

Also, I don't believe that <div> elements are valid children for <ul> elements, so that may also be your problem. If the Javascript change does nothing, then perhaps you should try to change your html so that your <li> items are direct children of the <ul> element.

Hope this helps.