javascript - 如何使用可排序的 JqueryUi 一次同时拖动多个项目?
问题描述
我进行了一项研究,但没有发现任何适合我的情况。这是我的简化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的时候,要分别拖拽。我尝试使用 multisortable 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
元素的底部添加了填充,以便将项目拖到列表底部更容易,并用虚线边框表示缩进的可放置区域。
您还可以看到您可以继续缩进后续的 droppable child 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>
推荐阅读
- visual-c++ - 如何调试 vc_redist 引导程序的问题?
- reactjs - 构建后反应快照引发错误“EINVAL:无效参数,mkdir”
- node.js - Node.JS 多个新类仅最后一次执行(http 和 socket.io-client)
- python - Python 不允许我修改作为参数传递的列表
- linux - 如何修复在 linux shell 脚本中找不到的命令
- javascript - Reactjs 和节点 JS 中的错误(无法在渲染页面时发布)
- vb.net - 如何在设计模式下以编程方式选择控件
- kubernetes - 如何添加 IP 路由以便 Kubernetes 集群地址通过适当的适配器
- javascript - 尝试使用布尔值和函数返回所有对象的数组
- c++ - for循环内的if语句未执行