Элементы списка, не перетаскиваемые с помощью 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 от фреймворков. Итак, сначала вам нужно включить lib и https://github.com/SortableJS/angular-legacy-sortablejs angular-sortable 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>

Надеюсь, это поможет вам!

Answer 2

Я думаю, что здесь происходит то, что ваш 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> элемент.

Надеюсь это поможет.