Кто-нибудь здесь, кто пытался Sortable.js от rubaxa? В настоящее время я пытаюсь создать отсортированный список, используя эту библиотеку без успеха.
Причина, почему я выбрал эту библиотеку, состоял в том, что она не использует jQuery.
Это мой HTML:
<!-- FORCED RANKING QUESTION TYPE -->
<ul id="forcedranking" class="wizard-contents-container-ul" ng-model="currentQuestionObject.choices" ng-show="isForcedRankingQuestion">
<div class="answers-container">
<li ng-repeat="query in currentQuestionObject.choices | orderBy:['sequence','answer']" class="listModulePopup forcedRankingChoice">
{{query.answer}}
</li>
<div class="buttons-container">
<div class="carousel-wizard-btn-container">
<div class="carousel-wizard-buttons" ng-click="wizardPrevious()" ng-hide="currentQuestionIndex == 0">Previous</div>
<div class="carousel-wizard-buttons" ng-click="disableWizardFeatures() || wizardNext()" ng-hide="currentQuestionIndex == wizardQuestionSet.length - 1" ng-disabled="showWelcomeMessage === true ? false : disableWizardFeatures()">Next</div>
<div class="carousel-wizard-buttons" ng-click="disableWizardFeatures() || showResults() " ng-show="currentQuestionIndex == wizardQuestionSet.length - 1" ng-disabled="disableWizardFeatures()">Finish</div>
</div>
</div>
</div>
</ul>
И это мой код, который вызывает Sortable. Я получил его из приведенной выше ссылки. Я называю это внутри пользовательской директивы.
angular.module('myModule')
.directive('myCustomModal', function() {
return {
restrict: 'E',
scope: '',
replace: true, // replace with custom template
transclude: true, // insert custom content inside directive
controller: function($scope, $filter, $state, spService, spHelper, itemContainer, ngDialog, $http) {
// Other functions go here
/* Drag and drop for forced ranking */
var list = document.getElementById("forcedranking");
Sortable.create(list); // call Sortable.js
// ...
Я уже назвал библиотеку на главной странице HTML. Однако, когда я запускал свое приложение, я получил TypeError: Sortable.create is not a function
сообщением TypeError: Sortable.create is not a function
.
Что я здесь делаю неправильно?
РЕДАКТИРОВАТЬ В соответствии с просьбой Сильвинуса, вот консольный журнал Sortable:
ОБНОВЛЕНИЕ 1: после того, как вы нашли это более подробное объяснение относительно Sortable.js, я пересмотрел свой код следующим образом:
/* SORTABLE FOR FORCED RANKING */
// var list = document.getElementById("forcedranking");
Sortable.create(forcedranking, {});
Он больше не возвращает ошибку, но мои элементы не будут перемещаться, когда я их перетаскиваю. Я что-то пропустил?
Прежде всего проверьте мой ответ здесь. Элементы списка, не перетаскивающие с помощью Sortable.js, у вас такая же проблема, вы не используете ее правильно с угловым. Во-вторых, большая ошибка в вашем html <ul>
может содержать только <li>
вы не должны помещать div-упаковку li, это может дать вам неожиданные результаты в разных браузерах и недействительно html.
Когда вы включаете угловое-legacy-sortablejs, вам не нужно будет создавать свою настраиваемую директиву, и вы будете называть ее с помощью сортировки, подобной следующей:
<ul ng-sortable>
<li ng-repeat="item in items">{{item}}</li>
</ul>
Прочитайте в документе угловые-унаследованные сортировки и не забудьте включить sortable.js lib тоже
<div>
используются для вызова CSS-классов, необходимых для того, чтобы сделать страницу отзывчивой. Я понимаю, что структура HTML неортодоксальна, но мы должны были следовать разработанным для нее проектам. В любом случае, это уже было решено в ссылке SO, которую вы упомянули. Тем не менее, спасибо, что нашли время, чтобы ответить. :)