html - 使用 sortable() 时无法对框进行排序
问题描述
我想把左边的盒子换成右边的盒子。我正在使用sortable()
jQuery UI 中的函数。正如您在我的代码中看到的,它适用于 1 和 2 的数字,但不适用于左右切换它们的框。
$(".sort-me").sortable({
connectWith: ".connectedSortable"
});
.title {
background: red;
}
.storename {
background: blue;
}
.row {
margin-top: 1rem;
margin-bottom: 1rem;
}
/* metatag generator relevant */
.mg-item {
display: inline-block;
}
.mg-item-inner {
display: flex;
}
.mg-item-inner .btn-group .btn .name {
margin-right: 1rem;
}
.mg-item-inner>.btn-group:not(.collapsed)>.btn:first-child {
cursor: -webkit-grab;
cursor: grab;
}
.mg-item-inner .input-group-btn:only-child>.btn {
border-radius: 4px;
}
.mg-item-inner>.btn-group,
.mg-item-inner>.input-group {
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 10px 20px rgba(0, 0, 0, 0.04);
}
.mg-item-inner>.btn-group+.input-group,
.mg-item-inner>.input-group+.input-group,
.mg-item-inner>.btn-group+.btn-group,
.mg-item-inner>.input-group+.btn-group {
margin-left: -1px;
}
.mg-item span.add {
background: transparent;
color: #444;
padding-left: 0;
margin-left: 0;
}
.mg-item span.add:active {
box-shadow: unset;
color: #313131;
}
.mg-item span.add .fa-plus-circle {
opacity: 0;
}
.mg-item:hover span.add .fa-plus-circle {
opacity: 1;
}
/*# sourceMappingURL=mg.css.map */
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js"></script>
<div class="container">
<!-- Title -->
<div class="row">
<div draggable="true" class="sort-me title connectedSortable">
<div class="col-md-3">
<div class="mg-item-inner">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-container='body' title='Gibt den Seitentitel aus'>
<span class="name">TITLE</span><i class="fas fa-arrows-alt"></i></button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-container='body' title="Linie Erweitern / Reduzieren">
<i class="fas fa-swatchbook"></i></button>
</div>
<!-- /btn-group -->
<div class="input-group" role="group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">prefix <i class="fas fa-sort"></i></button>
<ul class="dropdown-menu">
<li><a href="#">prefix</a></li>
<li><a href="#">suffix</a></li>
<li><a href="#">none</a></li>
</ul>
</div>
<!-- /input-btn-group -->
<input type="text" class="form-control">
</div>
<!-- /input-group --><span type="button" class="btn add"><i class="fas fa-plus-circle"></i></span>
</div>
<!-- /mg-item-inner -->
</div>
<!-- /mg-item -->
</div>
<!--STORE NANE -->
<div draggable="true" class="sort-me storename connectedSortable">
<div class="col-md-3">
<div class="mg-item-inner">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-container='body' title='Fügt den Storename hinzu'>
<span class="name">STORENAME</span><i class="fas fa-arrows-alt"></i></button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Linie Erweitern / Reduzieren">
<i class="fas fa-swatchbook"></i></button>
</div>
<!-- /btn-group -->
<div class="input-group" role="group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">prefix <i class="fas fa-sort"></i></button>
<ul class="dropdown-menu">
<li><a href="#">prefix</a></li>
<li><a href="#">suffix</a></li>
<li><a href="#">none</a></li>
</ul>
</div>
<!-- /input-btn-group -->
<input type="text" class="form-control">
</div>
<!-- /input-group --><span type="button" class="btn add"><i class="fas fa-plus-circle"></i></span>
</div>
<!-- /mg-item-inner -->
</div>
<!-- /mg-item -->
</div>
</div>
</div>
<div class="sort-me">
<div class="connectedSortable">
<h1>
1
</h1>
</div>
<div class="connectedSortable">
<H1>2</H1>
</div>
</div>
https://jsfiddle.net/mjc9as5L/
箱子不能分拣的原因是什么?可能有CSS问题吗?
解决方案
尝试将 flex 添加到您的行中,它可能会解决您的问题。
.container > .row{
display:flex;
flex-direction:row-reverse;
justify-content:start;
}
推荐阅读
- hadoop - 更改主机名后的 java.net.ConnectException
- r - 使用 R 中的查找表基于另一个 df 创建新列
- python - 当索引是日期时间时,如何将两个 pandas 日期时间序列 DataFrame 相减?
- c++ - 非空函数潜在缺乏回报
- python - 处理多个用户 URL 输入,然后需要单独拆分和处理
- javascript - Angular - 选择错误 - NgFor 仅支持绑定到可迭代对象,例如数组
- javascript - 如果定义为函数参数,匿名函数何时执行?
- sql - 使用 kingswaysoft 优化插入到 crm 的记录数
- mysql - 与同一张表中的father_id和mother_id的雄辩关系
- arrays - Excel-VBA - 在数据字段数组中插入新的第一列,无需循环或 API 调用