如何解决避免使用SortableJS嵌套组
我需要在SortableJs doc中执行类似于此示例的操作,但除此之外,我还需要嵌套的可排序列表。我已经实现了,这不是问题。
错误的部分是我必须在嵌套组中实施成本管制,因为我需要避免嵌套组。一个组不能嵌套在另一个组中。一个元素可以嵌套在一个组中。
让我们看看图片,没关系,我们有两个组(item2和item5),里面有一些单个元素
但是,这对于我的项目是禁止的,该组位于grop内(item2中的item5)
我会尝试通过事件控制事物:“ onChoose”,“ onStart”,“ onEnd”,“ onAdd”,“ onUpdate”,“ onSort”,“ onRemove”,“ onChange”,“ onUnchoose”。但是没有结果。
这是我的代码:
<div id="nested" class="row">
<div id="example2-left" class="list-group nested-sortable col-sm-5">
<div class="list-group-item">Item 1</div>
<div class="list-group-item">Item 2
<div class="list-group nested-sortable"></div>
</div>
<div class="list-group-item">Item 4</div>
<div class="list-group-item">Item 3</div>
<div class="list-group-item">Item 4</div>
<div class="list-group-item">Item 5
<div class="list-group nested-sortable"></div>
</div>
<div class="list-group-item">Item 6</div>
</div>
<div id="example2-right" class="list-group col-sm-5">
<div class="list-group-item">Item 1</div>
<div class="list-group-item">Item 2</div>
<div class="list-group-item">Item 5</div>
<div class="list-group-item">Item 3</div>
<div class="list-group-item">Item 6</div>
</div>
</div>
和js
$(document).ready(function() {
var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));
for (var i = 0; i < nestedSortables.length; i++) {
new Sortable(nestedSortables[i],{
group: 'shared',animation: 150,fallbackOnBody: true,swapThreshold: 0.65,// trying to control elements
onChange: function(e) {
console.log('Left: onChange');
console.log(e);
e.preventDefault();
return false;
},onUnchoose: function(e) {
console.log('Left: onUnchoose');
console.log(e);
e.preventDefault();
return false;
},});
}
new Sortable($('#example2-right')[0],{
group: 'shared',onUnchoose: function(e) {
console.log('Right: onUnchoose');
console.log(e);
e.preventDefault();
return false;
},onAdd: function(e) {
console.log('Right: onAdd');
console.log(e);
e.preventDefault();
return false;
},onChange: function(e) {
console.log('Right: onChange');
console.log(e);
e.preventDefault();
return false;
},});
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。