jQuery带计数器的可排序列表

jQuery sortable lists with counter

本文关键字：排序 列表 计数器 jQuery      更新时间：2023-09-26

我有两个可排序的列表，并使用jQuery将列表1中的项目拖放到列表2中。我遇到的问题是，我放置了一个计数器，每当列表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 1当我试图从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);
     }
})

尝试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/]

相关文章：