Nestedsortable和draggable列表 [英] Nestedsortable and draggable list
本文介绍了Nestedsortable和draggable列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
Hi
I would like to use the same thing as in the draggable/sortable demo :
http://jqueryui.com/draggable/#sortable
but with nested sortable
https://github.com/mjsarfatti/nestedSortable.
Both works well but I can't add the draggable element into the nestedSortable list and do it also sortable. Can someone help me with this please?
Thanks
我尝试过:
What I have tried:
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="~/Scripts/jquery.mjs.nestedSortable.js"></script>
<div class="cf nestable-lists">
<div class="dd" id="toolList">
Parent List
<ul id='tools'>
<li>
Router Architecture
</li>
<li>
Customer
<ul>
<li>Customer Segment</li>
<li>Value Proposition</li>
<li>Cost / Revenue</li>
<li>Supporting Infrastructure</li>
<li>Customer Interface</li>
</ul>
</li>
<li>
Product / Service
</li>
<li>
Product / Service Sub-Component
</li>
<li>
Function
</li>
<li>
Attribute
</li>
<li>
Issues
</li>
<li>
Risks
</li>
</ul>
</div>
<div class="dd" id="rootList">
Child List
<ul id='list1'>
<li><div>Some</div></li>
<li>
<div>Test</div>
<ul>
<li><div>My Innovation Architectures</div></li>
<li><div>All Innovation Architectures</div></li>
</ul>
</li>
<li><div>Thing</div></li>
</ul>
</div>
</div>
<script>
jQuery(function ($) {
$('#tools li').draggable({
cursor: 'move',
helper: 'clone',
connectToSortable: "#list1",
});
updateList();
function updateList() {
console.log('updateList()');
$('#list1').nestedSortable({
handle: 'div',
items: 'li',
toleranceElement: '> div',
})
.sortable({
revert: true,
update: function (event, ui) {
$('.next, .prev').removeClass('next prev');
var $prevElem = ui.item.prev(),
$nextElem = ui.item.next();
$prevElem.addClass('prev');
$nextElem.addClass('next');
// Trying to re-initialize here.
updateList();
}
});
}
});
</script>
推荐答案
){
('#tools li')。draggable({
cursor:'move',
helper:'clone',
connectToSortable:#list1,
});
updateList();
函数updateList(){
console.log('updateList()');
('#tools li').draggable({ cursor: 'move', helper: 'clone', connectToSortable: "#list1", }); updateList(); function updateList() { console.log('updateList()');
('#list1')。nestedSortable({
handle :'div',
项目:'li',
toleranceElement:'> div',
})
.sortable({
revert:true,
update:function(event,ui){
('#list1').nestedSortable({ handle: 'div', items: 'li', toleranceElement: '> div', }) .sortable({ revert: true, update: function (event, ui) {
这篇关于Nestedsortable和draggable列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文