gpt4 book ai didi

javascript - 可排序跳转到容器外

转载 作者:行者123 更新时间:2023-12-01 05:28:46 24 4
gpt4 key购买 nike

我对Jonas von Andrian's jQuery Sortable plugin有疑问。当我尝试移动项目时,它们首先飞出 .row,只有在此之后我才能正常移动它。

我做错了什么?

$(".items-container").sortable({
containerSelector: ".items-container",
itemSelector: ".item",
containerPath: "> .row"
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script>

<div class="container">
<div class="items-container">
<div class="row">
<div class="col-xs-4 panel panel-danger item">
<div class="panel-heading">First panel</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
</div>
<div class="col-xs-4 panel panel-warning item">
<div class="panel-heading">Second panel</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
</div>
<div class="col-xs-4 panel panel-success item">
<div class="panel-heading">Third panel</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
</div>
</div>
</div>
</div>

View on JS Bin

最佳答案

我建议使用 itemPath 而不是 containerPath,基于 "Sort Tables" example .

该文档对我来说有点模糊。它说 itemPath 是“项目与其子容器之间的确切 css 路径”。但在我看来,它是容器及其项目之间的 CSS 路径,这就是 containerPath 应该定义的。

我还添加了 placeholder 选项,以便将 Bootstrap 样式应用到占位符元素。

$(".items-container").sortable({
containerSelector: ".items-container",
itemPath: "> .row",
itemSelector: ".item",
placeholder: '<div class="col-xs-4 panel placeholder"/>'
});
.row .dragged {
position: absolute;
opacity: 0.5;
z-index: 2000;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script>

<div class="container">
<div class="items-container">
<div class="row">
<div class="col-xs-4 panel panel-danger item">
<div class="panel-heading">First panel</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
</div>
<div class="col-xs-4 panel panel-warning item">
<div class="panel-heading">Second panel</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
</div>
<div class="col-xs-4 panel panel-success item">
<div class="panel-heading">Third panel</div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptates!</div>
</div>
</div>
</div>
</div>

关于javascript - 可排序跳转到容器外,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38599582/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com