Элементы списка, которые не перетаскиваются с помощью Sortable.js

Sortable.J здесь новичок, поэтому будьте осторожны.

Я пытаюсь реализовать сортируемый список на своей странице с помощью 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
person Dee J.    schedule 22.08.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Проблема в том, что вы не следуете сортируемой угловой документации. Недавно они изменили проект и отделили js от фреймворков. Итак, сначала вам нужно включить библиотеку и сортируемую библиотеку angular angular-legacy-sortablejs

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>

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

person Octavioamu    schedule 23.08.2016
comment
Ахаха, это потому, что документация меня смутила. Но да, вызов ng-sortable помог. Благодарю вас! - person Dee J.; 31.08.2016

arrow_upward
0
arrow_downward

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

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

person Robba    schedule 22.08.2016