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

Question

JQuery UI using drag drop. When I drag and drop items, I want the value "Act and DISPLAY cards (0)" to change to 0.

I also need Ajax code to update the data when the persistence is finished.

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

please find the attached fiddle for your answer

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

You can use the sortable's receive event instead.

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