问题描述
我进行了一项研究,但没有发现适合我的情况。这是我的简化 html
<div>
<div>
<ul class="sortable">
<li id="item-1">
<!-- item -->
<ul>
<!-- plenty of li tags -->
<!-- they have ids like: item-1.1,item-1.2 and so on -->
<ul>
</li>
</ul>
</div>
<div>
<ul class="sortable">
<!-- same goes here -->
</ul>
</div>
</div>
在拖动 item-1、item-2 等时,我也需要拖动它的所有子项。但是在拖拽item-1.1、item-1.2时,应该分开拖拽。我尝试使用多排序 jquery 插件,但是当我拖动父“li”标签时,应放置项目的占位符太大(因为它的高度),这是它的 CSS。
background-color: rgba(220,224,228,.25) !important
height: 150px
margin-bottom: 8px
border-radius: 8px
border: 1px solid $color-border !important
我用于排序的代码
const sortableOptions = {
connectWith: ".sortable",cancel: ".ignore-sortable",placeholder: "ui-state-highlight",}
$(".sortable").sortable(sortableOptions).disableSelection();
有没有办法以某种方式实现这一目标?
解决方法
您可以将 .sortable
添加到子 ul
元素,如下所示。
我稍微修改了 CSS
,理想情况下您应该避免使用 !important
。我在 .sortable
元素的底部添加了填充,以便更轻松地将项目拖到列表底部,并用虚线边框表示缩进的可放置区域。
您还可以看到您可以继续缩进后续可放置的子 ul
,尽管它开始看起来很忙!
如果这不是您想要的,请告诉我。
const sortableOptions = {
connectWith: ".sortable",cancel: ".ignore-sortable",placeholder: "ui-state-highlight",}
$(".sortable").sortable(sortableOptions).disableSelection();
.sortable {
background-color: rgba(220,224,228,.25);
padding-bottom: 1em;
border-radius: 8px;
border: 1px solid blue;
}
.sortable .sortable {
background: none;
border-style: dashed;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div>
<ul class="sortable">
<li id="item-1">
<!-- item -->
Section 1
<ul class="sortable">
<li>1.1
</li>
<ul class="sortable">
<li>1.1</li>
<li>1.2</li>
</ul>
<li>1.2</li>
</ul>
</li>
</ul>
</div>
<hr>
<div>
<ul class="sortable">
<li>Second List Group 1
<ul class="sortable">
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
<li>Second List Group 2</li>
</ul>
</div>
<hr>
<div>
<ul class="sortable">
<li id="item-1">
<!-- item -->
Section 1
<ul class="sortable">
<li>1.1
</li>
<ul class="sortable">
<li>1.1
<ul class="sortable">
<li>1.1.1</li>
<li>1.1.2</li>
</ul>
</li>
<li>1.2</li>
</ul>
<li>1.2</li>
</ul>
</li>
</ul>
</div>