Jquery 拖放项目计数和 Ajax 发布更新

Question

使用拖放的 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) {

    }
});

Answer 1

请在附件中找到答案

https://jsfiddle.net/px4fnws8/22/

您可以改用 sortable 的接收事件。

$("#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);
  }
});