不使用Sortable.js拖动的列表项
不使用Sortable.js拖动的列表项
提问于 2016-08-22 06:45:20
这里是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是一个非常整洁的库，这就是为什么我想让它工作得如此糟糕的原因。但我只是不知道自己做错了什么。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-08-23 17:32:32
问题是，您没有遵循可排序的角度文档。他们最近更改了项目，并将js与框架分离开来。首先，您需要包含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>希望这能帮到你！
Stack Overflow用户
发布于 2016-08-22 07:10:07
我想这里要做的是，你的JS是在角度完成之前执行的，但是很难从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>元素的直接子元素。
希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39072836
复制相关文章
相似问题
腾讯云开发者
