CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-sortable
user1760710
user1760710

Reputation:

jQuery sortable lists with counter

I have 2 sortable lists and am using jQuery to allow the items in list 1 to be dragged and dropped into list2. The issue I am having is that I have placed a counter that every time an item from list 1 is drop into list 2 the counter goes up by one. Now if I don't want the item I dragged into list 2 and drag it back, my counter is not subtracting one. I display my counter in a <span> tag. I would like my counter to decrease every time I remove an item in list 2.

  $(function() {
      $( "#sortable1, #sortable2" ).sortable({
          connectWith: ".connectedSortable"
      }).disableSelection();
  });
  $(function() {
      $( "#sortable2" ).sortable({
          placeholder: "ui-state-highlight"
      });
      $( "#sortable2" ).disableSelection(); 
  });

<span id="counter_text"></span>

LIST 2 when I drag from LIST 1

var counter = 0;
var remainiing_counter = 0;

$( "#sortable2" ).droppable({
    drop: function(event, ui) {
        $('#col_results').empty();
        if (!ui.draggable.hasClass("dropped")) {
            ui.draggable.addClass("dropped");
            counter++;
        }
        $(this).append(ui.draggable);
        if($('#sortable2').hasClass("connectedSortable") === true) {
            if (counter <= 15) {
                $('#counter_text').text(counter);
                $("#counter_text_container").css("display","inline");
                $("#counter_text_container_1").css("display","none");
                $("#sortable2").css("border-color","grey");
                $('#btn_display_col').prop('disabled', false);  
            }
        }
    }
})

LIST 1 when am trying to drag back an item from LIST 2

var minuscounter = 0;
$( "#sortable1" ).droppable({
    drop: function(event, ui) {
        $('#col_results').empty();

        if (!ui.draggable.hasClass("dropped")) {
            ui.draggable.addClass("dropped");
            if(parseInt($('#counter_text').text()) > 0) {
                minuscounter = parseInt($('#counter_text').text()) - 1
                $('#counter_text').text(minuscounter);
            }
        }
        $(this).append(ui.draggable);
     }
})

Upvotes: 0

Views: 292

Answers (1)

stdob--
stdob--

Reputation: 29172

Try receive and remove events:

$( "#sortable2" ).sortable({
  receive: function( event, ui ) {
   counter++;
   $('#counter_text').html( counter );
  }
});

$( "#sortable2" ).sortable({
  remove: function( event, ui ) {
   counter--;
   $('#counter_text').html( counter );
  }
});

[ https://jsfiddle.net/7o767eL7/ ]

Upvotes: 0

Related Questions