JqueryUI Sortable - 仅在子列表中移动项目的功能（第三个位置）
JqueryUI Sortable - Functionality to only move items within sublist (3rd pos)
我正在尝试使用 jquery sortable 设置特定功能。我似乎很接近但遇到了一个问题。我只需要将子项目移动到 3 级位置 - 在帐户类型下
http://jsfiddle.net/Davos8549/x6f0upng/1/
我只希望子项能够拖放到具有 class="hasItems"
的其他列表中
我应该仍然能够在其主容器“资产”中移动 AR、VZ、BANK。但是我不应该把整个东西放到一个子列表中（这是我现在遇到的问题）。
Asset
AR
subitem2-1
subitem3-15
subitem3-25
subitem2-2
subitem2-3
subitem2-4
VZ
subitem3-1
subitem3-2
subitem1-35
subitem3-3
subitem3-4
Bank
subitem1-1
subitem1-2
subitem3-45
subitem1-3
subitem1-4
Liability
Bank5
subitem1-15
subitem1-25
subitem1-45
AR5
subitem2-15
subitem2-25
subitem2-35
subitem2-45
VZ5
subitem3-35
我相信解决方案可能在这段代码中：
<script>
$(function() {
$('ul.mainlist').sortable({
connectWith: 'ul.mainlist',
beforeStop: function(ev, ui) {
if ($(ui.item).hasClass('hasItems') && $(ui.placeholder).parent()[0] != this) {
$(this).sortable('cancel');
}
}
});
$('ul.sublist').sortable({
connectWith: 'ul.sublist'
});
});
</script>
您需要更具体地确定要移动的 DOM 元素：
首先，我对您的 html 做了一些小改动，将 class“组”添加到 Bank[= 组的 <li> 标签中41=] 和 责任 ，这使得它们更容易识别。
我还在子列表中添加了 class“已连接”，我希望它们是可互换的，作为示例，您可以同时拥有完整的可互换子项和子项，它们只能排序在他们自己的组内。此 class“已连接”用于 sortable() 函数 connectWith 功能，请参阅 Connect Lists
如果一个组变空，您需要定义一个最小高度，以便能够将项目移回该空组。
然后我将 sortable 更改为：
$(function() {
$('li.group ul.sublist').sortable({
});
$('.hasItems ul.sublist').sortable({
connectWith: ".connected"
}).disableSelection();
});
现在允许您按要求移动。
查看fiddle了解详情或
$(function() {
$('li.group ul.sublist').sortable({
});
$('.hasItems ul.sublist').sortable({
connectWith: ".connected"
}).disableSelection();
});
body
{
font-family: Arial, Tahoma, San-Serif;
font-size: 12px;
}
ul {
padding: 0;
list-style-type: none;
}
p
{
margin: 0 0 20px;
}
ul.mainlist
{
float: left;
margin: 0 20px 0 0;
width: 100px;
}
ul.mainlist li
{
background: #fff;
border: solid 1px #ccc;
padding: 10px;
width:100%;
}
ul.sublist
{
min-height: 35px;
background: gold;
}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
crossorigin="anonymous"></script>
<p>sublists shouldn't be able to be dragged out of their normal list</p>
<ul id="list1" class='mainlist'>
<li class="group">Asset
<ul class="sublist">
<li class="hasItems">Bank
<ul class="sublist connected">
<li>subitem1-1</li>
<li>subitem1-2</li>
<li>subitem1-3</li>
<li>subitem1-4</li>
</ul>
</li>
<li class="hasItems">AR
<ul class="sublist connected">
<li>subitem2-1</li>
<li>subitem2-2</li>
<li>subitem2-3</li>
<li>subitem2-4</li>
</ul>
</li>
<li class="hasItems">VZ
<ul class="sublist connected">
<li>subitem3-1</li>
<li>subitem3-2</li>
<li>subitem3-3</li>
<li>subitem3-4</li>
</ul>
</li>
</ul>
</li>
<li class="group">Liability
<ul class="sublist">
<li class="hasItems">Bank5
<ul class="sublist connected">
<li>subitem1-15</li>
<li>subitem1-25</li>
<li>subitem1-35</li>
<li>subitem1-45</li>
</ul>
</li>
<li class="hasItems">AR5
<ul class="sublist">
<li>subitem2-15</li>
<li>subitem2-25</li>
<li>subitem2-35</li>
<li>subitem2-45</li>
</ul>
</li>
<li class="hasItems">VZ5
<ul class="sublist">
<li>subitem3-15</li>
<li>subitem3-25</li>
<li>subitem3-35</li>
<li>subitem3-45</li>
</ul>
</li>
</ul>
</li>
</ul>
我正在尝试使用 jquery sortable 设置特定功能。我似乎很接近但遇到了一个问题。我只需要将子项目移动到 3 级位置 - 在帐户类型下
http://jsfiddle.net/Davos8549/x6f0upng/1/
我只希望子项能够拖放到具有 class="hasItems"
的其他列表中我应该仍然能够在其主容器“资产”中移动 AR、VZ、BANK。但是我不应该把整个东西放到一个子列表中（这是我现在遇到的问题）。
Asset
AR
subitem2-1
subitem3-15
subitem3-25
subitem2-2
subitem2-3
subitem2-4
VZ
subitem3-1
subitem3-2
subitem1-35
subitem3-3
subitem3-4
Bank
subitem1-1
subitem1-2
subitem3-45
subitem1-3
subitem1-4
Liability
Bank5
subitem1-15
subitem1-25
subitem1-45
AR5
subitem2-15
subitem2-25
subitem2-35
subitem2-45
VZ5
subitem3-35
我相信解决方案可能在这段代码中：
<script>
$(function() {
$('ul.mainlist').sortable({
connectWith: 'ul.mainlist',
beforeStop: function(ev, ui) {
if ($(ui.item).hasClass('hasItems') && $(ui.placeholder).parent()[0] != this) {
$(this).sortable('cancel');
}
}
});
$('ul.sublist').sortable({
connectWith: 'ul.sublist'
});
});
</script>
您需要更具体地确定要移动的 DOM 元素：
首先，我对您的 html 做了一些小改动，将 class“组”添加到 Bank[= 组的 <li> 标签中41=] 和 责任 ，这使得它们更容易识别。
我还在子列表中添加了 class“已连接”，我希望它们是可互换的，作为示例，您可以同时拥有完整的可互换子项和子项，它们只能排序在他们自己的组内。此 class“已连接”用于 sortable() 函数 connectWith 功能，请参阅 Connect Lists
如果一个组变空，您需要定义一个最小高度，以便能够将项目移回该空组。
然后我将 sortable 更改为：
$(function() {
$('li.group ul.sublist').sortable({
});
$('.hasItems ul.sublist').sortable({
connectWith: ".connected"
}).disableSelection();
});
现在允许您按要求移动。
查看fiddle了解详情或
$(function() {
$('li.group ul.sublist').sortable({
});
$('.hasItems ul.sublist').sortable({
connectWith: ".connected"
}).disableSelection();
});
body
{
font-family: Arial, Tahoma, San-Serif;
font-size: 12px;
}
ul {
padding: 0;
list-style-type: none;
}
p
{
margin: 0 0 20px;
}
ul.mainlist
{
float: left;
margin: 0 20px 0 0;
width: 100px;
}
ul.mainlist li
{
background: #fff;
border: solid 1px #ccc;
padding: 10px;
width:100%;
}
ul.sublist
{
min-height: 35px;
background: gold;
}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
crossorigin="anonymous"></script>
<p>sublists shouldn't be able to be dragged out of their normal list</p>
<ul id="list1" class='mainlist'>
<li class="group">Asset
<ul class="sublist">
<li class="hasItems">Bank
<ul class="sublist connected">
<li>subitem1-1</li>
<li>subitem1-2</li>
<li>subitem1-3</li>
<li>subitem1-4</li>
</ul>
</li>
<li class="hasItems">AR
<ul class="sublist connected">
<li>subitem2-1</li>
<li>subitem2-2</li>
<li>subitem2-3</li>
<li>subitem2-4</li>
</ul>
</li>
<li class="hasItems">VZ
<ul class="sublist connected">
<li>subitem3-1</li>
<li>subitem3-2</li>
<li>subitem3-3</li>
<li>subitem3-4</li>
</ul>
</li>
</ul>
</li>
<li class="group">Liability
<ul class="sublist">
<li class="hasItems">Bank5
<ul class="sublist connected">
<li>subitem1-15</li>
<li>subitem1-25</li>
<li>subitem1-35</li>
<li>subitem1-45</li>
</ul>
</li>
<li class="hasItems">AR5
<ul class="sublist">
<li>subitem2-15</li>
<li>subitem2-25</li>
<li>subitem2-35</li>
<li>subitem2-45</li>
</ul>
</li>
<li class="hasItems">VZ5
<ul class="sublist">
<li>subitem3-15</li>
<li>subitem3-25</li>
<li>subitem3-35</li>
<li>subitem3-45</li>
</ul>
</li>
</ul>
</li>
</ul>