使用拖放操作的jQuery UI。当我拖放项目时,我希望值“ Act and DISPLAY cards(0)”更改为0。
持久性完成后,我还需要Ajax代码来更新数据。
https://jsfiddle.net/qxwLa98z/
<div class="col-lg-12" id="maximum-drag">
<div class="title-box">
<h5>ACTIVE DISPLAY CARDS (<span>0</span>)</h5>
<div style="font-size: 14px;color: #6e6e6e;">It is a list of your display cards that are active on the server.</div>
</div>
<div class="flex-container" id="active-cards">
</div>
<div class="title-box">
<h5>YOUR DISPLAY CARDS</h5>
<div style="font-size: 14px;color: #6e6e6e;">List of display cards you can use.</div>
</div>
<div class="flex-container" id="deactive-cards">
<div id="item-1"><img src="https://svgur.com/i/Cx3.svg" style="width: 90%"></div>
<div id="item-2"><img src="https://svgur.com/i/D0_.svg" style="width: 90%"></div>
<div id="item-3"><img src="https://svgur.com/i/D1R.svg" style="width: 90%"></div>
<div id="item-4"><img src="https://svgur.com/i/CzY.svg" style="width: 90%"></div>
<div id="item-5"><img src="https://svgur.com/i/D0m.svg" style="width: 90%"></div>
<div id="item-6"><img src="https://svgur.com/i/D0n.svg" style="width: 90%"></div>
</div>
$("#deactive-cards, #active-cards").disableSelection();
$("#deactive-cards").droppable({
accept: "#active-cards > div",
});
$("#active-cards").droppable({
accept: "#deactive-cards > div",
});
$("#deactive-cards, #active-cards").sortable({
placeholder: "",
connectWith: ".flex-container",
containment: "#maximum-drag",
revert: true,
scroll: false,
update: function(event, ui) {
}
});
答案 0 :(得分:0)
请找到所附的小提琴作为答案
https://jsfiddle.net/px4fnws8/22/
您可以改用sortable的receive事件。
$("#deactive-cards, #active-cards").sortable({
placeholder: "",
connectWith: ".flex-container",
containment: "#maximum-drag",
revert: true,
scroll: false,
receive: function(event, ui) {
$("#active-cards-count").text($("#active-cards").find("div").length);
}
});