Как записать данные в массив, в случае переноса курсором мыши элементов в другой элемент?

Question

[HelenChydilove]

Добра Всем! Писала на jquery
Я создала блок, в нем перечисленные параметры(например имена).div class="box-list"
Cоздала второй блок(div class="box-choice"), куда буду перемещать эти имена. Они перемещаются. вот код https://codepen.io/LenaBoro/pen/rYxqqv?editors=1010

Есть массив arr[], туда записываю id элемента при перемещении (также удаляются из массива).
Они отображаются как ['city-1,'city-1'], а должно быть ['city-1,'city-2'].
В чем может быть причина, помогите,ступор

<div class="box-list">
    <div class ="drag" id="city-1">Spb <span >X</span></div>
    <div class ="drag" id="city-2">Inta <span >X</span></div>
</div>
<div id="box-choice"></div>

Скрипт

var arr=[]
    $('.drag').draggable({revert:'invalid'});
    $('#box-choice').droppable({
        drop: function( event, ui ) {
         if( $(this).addClass("ui-state-highlight")){
           arr.push($('.drag').attr('id'));
           console.log(arr) 
       }
        }
    })
    $('.drag span').click(function() {
        $(this).parent('div').css({left:'0', top: '0'});
        $(this).css('display','none');
        arr.splice($(this),1)
        console.log(arr);
    });

     $('.drag').mouseup(function(){
     if(($(this).css('left')!=0 ) && ($(this).css('left')!= 'auto'))
      {$(this).children($('span')).css('display','block');}  
      console.log($(this).attr('id')) 
     });

Comments

[Алексей Скляров]

Зачем вы создаете второй такой же ваш вопрос?

Answer 1

[0xD34F]

замените arr.push($('.drag').attr('id')); на arr.push(ui.draggable.attr('id'));