【发布时间】：2020-08-04 16:23:02
【问题描述】：
使用 JQuery UI，我想将清单中的图标一一移动到蓝色方块中。当我拖动图标时，它们会远离方块。它不被放入正方形中。
我希望每一帧只有一个图标。在 Squares 中拖放时也应该恢复它。
只有图标应该移动。
注意：“拖放进行测试。”
$(".account-list div, .inventory-list div").sortable({
placeholder: "",
connectWith: ".account-list > div, .inventory-list > div",
containment: "body",
revert: true,
opacity: 0.8,
zIndex: 9999,
cursor: "move",
scroll: false,
create: function(event, ui) {
},
start: function(event, ui) {
},
create: function(event, ui) {
},
update: function(event, ui) {
}
}).disableSelection();body,html{
padding: 10px;
font-family: Arial, sans-serif;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.card {
width: 260px;
height: 300px;
display: inline-grid;
border: 4px solid rgb(8 208 255);
background: #ffffff;
position: relative;
color: rgb(8 208 255);
border-radius: 10px;
font-weight: bold;
margin-right: 10px;
}
.card-title{
padding: 10px;
border-bottom: 4px solid rgb(8 208 255);
}
.icon {
background: url(https://svgur.com/i/NVE.svg) center center no-repeat;
background-size: 40px;
position: relative;
display: flex;
height: 50px;
width: 50px;
flex: 1 0 27%;
}
.inventory-list{
display: flex;
flex-wrap: wrap;
overflow: auto;
}
.account-list{
display: flex;
flex-wrap: wrap;
overflow: auto;
}
.slot{
flex: 1 0 27%;
margin: 5px;
background-color: rgb(240 253 255);
height: 65px;
width: 65px;
border: 2px solid #59dfff;
justify-content: center;
display: flex;
align-items: center;
}<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.min.js"></script>
<div class="card">
<div class="card-title">Inventory</div>
<div class="inventory-list">
<div class="slot"><div class="icon"></div></div><div class="slot"><div class="icon"></div></div><div class="slot"><div class="icon"></div></div><div class="slot"><div class="icon"></div></div><div class="slot"><div class="icon"></div></div><div class="slot"><div class="icon"></div></div><div class="slot"><div class="icon"></div></div><div class="slot"><div class="icon"></div></div><div class="slot"><div class="icon"></div></div><div class="slot"><div class="icon"></div></div><div class="slot"><div class="icon"></div></div><div class="slot"><div class="icon"></div></div><div class="slot"><div class="icon"></div></div><div class="slot"><div class="icon"></div></div><div class="slot"><div class="icon"></div></div> </div>
</div>
<div class="card">
<div class="card-title">Account</div>
<div class="account-list">
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
</div>
</div>【问题讨论】：
-
库存中的物品需要分类吗？还是用户只是从中抓取一个项目以拖动到帐户列表中？
-
@Twisty 库存中产品的排名无关紧要。库存中的项目和帐户部分中的项目可以相互移动。它可以携带到两侧。
-
好的，谢谢，所以让两者都可以排序是有意义的，这样项目就可以来回移动。 Inventory 中的顺序并不重要，重要的是 Account 列表中的位置，对吧？
-
@Twisty 是的....
标签： jquery-ui jquery-ui-sortable jquery-ui-draggable jquery-ui-droppable