提问人：mandm123 提问时间：8/11/2023 最后编辑：mandm123 更新时间：8/11/2023 访问量：149
如何在拖放布局中自由地对卡片进行排序 - jQuery Bootstrap - 可以将多张卡片放在多列的一行中
how can i freely sort cards in drag and drop layout - jquery bootstrap - where multiple cards can be placed in one row across multiple columns
问：
我想为我的引导卡提供拖放式可排序布局。我确实使用了可排序的jQuery插件，但它是连续拖放的。我希望如果我在一行中有高度更大的 col-6 大小的卡片 1，我可以在同一行中将 3 号牌和 4 号牌 4 放在它旁边，这些卡片 3 和 4 都是 col-3 大小，这样 card3 和 card4 彼此上方一个，但都与 card1 在同一行。
这是我对上述图片的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery UI Sortable - Display as grid</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="card-container">
<div class="row">
<div class="col-6">
<div class="card">Card 1
<p>
some content so that the card is bigger
</p></div>
</div>
<div class="col-6">
<div class="card">Card 2</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="card">Card 3</div>
</div>
<div class="col-3">
<div class="card">Card 4</div>
</div>
<div class="col-12">
<div class="card">Card 5</div>
</div>
<div class="col-6">
<div class="card">Card 6</div>
</div>
<div class="col-6">
<div class="card">Card 7</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function() {
$(".row").sortable({
connectWith: ".row"
}).disableSelection();
});
</script>
---我想在有特定卡片空间的列和行中自由移动卡片，但卡片的列大小不会改变。所以我想要 - 这张牌 1 有下一张牌 6，但也有牌 7 belolow 牌 6，因为有空格，或者牌 3 和牌 4 在同一行中
答： 暂无答案
评论