Question

我有2个可排序列表，我使用jQuery来将列表1中的项目拖放到list2中。我遇到的问题是我已经放置了一个计数器，每当列表1中的项目进入列表2时，计数器就会增加一个。现在，如果我不想要将项目拖入列表2并将其拖回，我的计数器不会减去一个。我在<span>标签中显示我的计数器。每当我删除列表2中的项目时，我希望我的计数器减少。

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

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

从LIST 1拖出时的LIST 2

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 2中拖回一个项目时，列表1

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);
     }
})

Answer 1

尝试receive和remove事件：

$( "#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/]

带有计数器的jQuery可排序列表

1 个答案: