Jquery Drag Drop Item Count и Ajax Post Update - PullRequest
Новая
       17

Jquery Drag Drop Item Count и Ajax Post Update

0 голосов
/ 12 мая 2019

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) {

    }
});

1 Ответ

0 голосов
/ 12 мая 2019

пожалуйста, найдите прикрепленную скрипку для ответа

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

Вместо этого вы можете использовать событие получения сортируемого. 

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