我对 jquery-ui sortable 的占位符有疑问。
我正在尝试对集合进行排序div
,并添加将其放置到何处的占位符。
目前,占位符似乎“卡”在顶部。可能是我的 CSS,但我似乎找不到问题所在
我试图按照jquery ui中的示例进行操作
演示
$(function() {
$('#sortable').sortable({
placeholder: 'ui-state-highlight',
}).disableSelection();
});
.form_elements {
width: 100%;
}
.form_elements ._element {
width: 100%;
display: block;
}
.form_elements ._element ._tu {
float: left;
width: 80px;
}
.form_elements ._element ._tu input[type=checkbox] {
scale: 0.8;
border-color: var(--bs-gray-500);
float: left;
}
.form_elements ._element ._tu .number {
float: right;
padding-right: 15px;
color: #6e6e6e;
}
.form_elements ._element ._elementContent {
width: calc(100% - 80px);
min-height: 10px;
background-color: #fff;
border: 1px solid #eaedf0;
margin-bottom: 15px;
float: left;
padding: 10px;
}
.form_elements ._element ._elementContent .line {
width: 100%;
}
.form_elements ._element ._elementContent .line.lh16 {
line-height: 18px;
}
.form_elements ._element ._elementContent .line .icon {
float: left;
color: #6e6e6e;
padding-right: 5px;
}
.form_elements ._element ._elementContent .line .icon i {
font-size: 18px;
}
.form_elements ._element ._elementContent .line .title {
float: left;
color: #6e6e6e;
font-size: 16px;
}
.form_elements ._element ._elementContent .line .rs {
float: right;
display: none;
}
.form_elements ._element ._elementContent .line .rs .settings {
float: left;
margin-right: 10px;
font-size: 18px;
cursor: pointer;
}
.form_elements ._element ._elementContent .line .rs .clone {
float: left;
margin-right: 10px;
font-size: 18px;
cursor: pointer;
}
.form_elements ._element ._elementContent .line .rs .move {
float: left;
font-size: 18px;
cursor: pointer;
}
.form_elements ._element ._elementContent:hover .rs {
display: block !important;
}
.ui-state-highlight {
height: 50px;
/* Adjust to match the height of your items */
margin: 5px 0;
/* Make sure to give some space to see where it will be dropped */
border: 2px dashed #ccc;
/* To visually distinguish the placeholder */
background-color: rgba(240, 240, 240, 0.5);
box-sizing: border-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"
integrity="sha256-J8ay84czFazJ9wcTuSDLpPmwpMXOm573OUtZHPQqpEU="
crossorigin="anonymous"></script>
<div class="form_elements ui-sortable" id="sortable">
<div class="_element" data-index="1">
<div class="_tu">
<input type="checkbox" class="form-check-input" />
<div class="number">2.</div>
</div>
<div class="_elementContent">
<div class="line lh16">
<div class="icon">
<i class="fa fa-hashtag"></i>
</div>
<div class="title">Number</div>
<div class="rs">
<div class="settings">
<i class="flaticon-clipboard"></i>
</div>
<div class="clone">
<i class="flaticon-background"></i>
</div>
<div class="move">
<i class="flaticon2-resize"></i>
</div>
</div>
</div>
</div>
</div>
<div class="_element" data-index="2">
<div class="_tu">
<input type="checkbox" class="form-check-input" />
<div class="number">3.</div>
</div>
<div class="_elementContent">
<div class="line lh16">
<div class="icon">
<i class="fa fa-hashtag"></i>
</div>
<div class="title">Number</div>
<div class="rs">
<div class="settings">
<i class="flaticon-clipboard"></i>
</div>
<div class="clone">
<i class="flaticon-background"></i>
</div>
<div class="move">
<i class="flaticon2-resize"></i>
</div>
</div>
</div>
</div>
</div>
<div class="_element" data-index="3">
<div class="_tu">
<input type="checkbox" class="form-check-input" />
<div class="number">4.</div>
</div>
<div class="_elementContent">
<div class="line lh16">
<div class="icon">
<i class="flaticon2-sort-alphabetically"></i>
</div>
<div class="title">Text</div>
<div class="rs">
<div class="settings">
<i class="flaticon-clipboard"></i>
</div>
<div class="clone">
<i class="flaticon-background"></i>
</div>
<div class="move">
<i class="flaticon2-resize"></i>
</div>
</div>
</div>
</div>
</div>
<div class="_element" data-index="0" style="">
<div class="_tu">
<input type="checkbox" class="form-check-input" />
<div class="number">1.</div>
</div>
<div class="_elementContent">
<div class="line lh16">
<div class="icon">
<i class="flaticon2-sort-alphabetically"></i>
</div>
<div class="title">Text</div>
<div class="rs">
<div class="settings">
<i class="flaticon-clipboard"></i>
</div>
<div class="clone">
<i class="flaticon-background"></i>
</div>
<div class="move">
<i class="flaticon2-resize"></i>
</div>
</div>
</div>
</div>
</div>
</div>
您需要为
height
每个可拖动元素和占位符分配一个值(还需要对占位符进行一些样式设置以使其适合,我没有将其包含在代码片段中,因为这取决于您的喜好)