JQuery: подсчет списка контактов

Question

У меня есть список подключений jquery и счетчик. Первый список (сортируемый 1) содержит значения, а второй список (сортируемый 2) пуст. Каждый раз, когда я перетаскиваю элемент, счетчик идет + 1, эта часть работает, но моя проблема возникает каждый раз, когда я сортирую значения в sortable 2, например, я хочу, чтобы элемент поднялся на одну позицию, счетчик по-прежнему идет + 1. Я бы хотел, чтобы счетчик только 1 + 1 + 1, когда вы перемещаете элементы из сортируемого 1 в сортируемый 2 и наоборот.

<script> 
    $(function() { 
    $("#sortable1, #sortable2").sortable({ 
     connectWith: ".connectedSortable" 
    }).disableSelection(); 

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

    }); 
    </script> 

HTML

<span id="counter_text">0</span> 
<ul id="sortable1" class="connectedSortable"> 
<li class="ui-state-default">Cat</li> 
<li class="ui-state-default">Dog</li> 
<li class="ui-state-default">Mouse</li> 
</ul> 

<ul id="sortable2" class="connectedSortable"> 
</ul> 

Jquery

$("#sortable2").droppable({ 
drop: function(event, ui) 
{ 
    $('#column_results').empty(); 
    $(this).append(ui.draggable); 
    if($('#sortable2').hasClass("connectedSortable") === true) 
    { 
    if (counter <= 3) { 
     counter++; 
     $('#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);  
    } 
    if(counter > 3) 
    { 
    $("#sortable2").css("border-color","red"); 
    $("#counter_text_container").css("display","none"); 
    remainiing_counter = counter - 3; 
    $("#counter_text_container_1").css("display","inline"); 
    $("#counter_text_remove").text(remainiing_counter); 
    $('#btn_display_col').prop('disabled', true); 
    $("#dialog-small-warning-cols").dialog({ 
          autoOpen: false, 
          closeOnEscape: false, 
          width:250, 
          modal: true 
         }); 
         $("#dialog-small-warning-cols").dialog({ 
          dialogClass: "no-close", 
          buttons : { 
          "Ok" : function() { 
          //$('#country_id').load(document.URL + ' #country_id');  
          $(this).dialog("close"); 
          } 
     } 
    }); 
         $("#dialog-small-warning-cols").dialog("open"); 
    } 
     if(counter === 3) 
    { 
    $("#counter_text_container").css("display","inline"); 
     $("#counter_text_container_1").css("display","none"); 
     $("#sortable2").css("border-color","grey"); 
     $('#btn_display_col').prop('disabled', false); 
    $('#btn_display_col').prop('disabled', false); 
    } 
    } 
} 

}) 

$("#sortable1").droppable({ 
    drop: function(event, ui) { 
     $('#column_results').empty(); 
    counter--; 
    if (counter <= 3) { 
     $('#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);  
    } 
if(counter > 3) 
    { 
    $("#sortable2").css("border-color","red"); 
    $("#counter_text_container").css("display","none"); 
    remaining_counter = counter - 3; 
    $("#counter_text_container_1").css("display","inline"); 
    $("#counter_text_remove").text(remaining_counter); 
    $('#btn_display_col').prop('disabled', true); 
    } 
     if(counter === 3) 
    { 
     $("#counter_text_container").css("display","inline"); 
     $("#counter_text_container_1").css("display","none"); 
     $("#sortable2").css("border-color","grey"); 
     $('#btn_display_col').prop('disabled', false); 
    } 
    } 
}) 

Answer 1

Quick Fix: https://jsfiddle.net/Twisty/usbkqxqo/1/

... 
drop: function(event, ui) { 
     $('#column_results').empty(); 
     if (!ui.draggable.hasClass("dropped")) { 
     ui.draggable.addClass("dropped"); 
     counter++; 
     } 
     $(this).append(ui.draggable); 
... 

Так что, когда drop, сделать быструю проверку, чтобы увидеть, если это не dropped как класс. Мы добавляем класс и увеличиваем counter. Теперь, когда вы сортируете или перемещаете объект со 2-й сортировкой, он не будет увеличиваться counter.