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

Question

[HelenChydilove]

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

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

<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($(this).children($('.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');}  
    });

Comments

[Kovalsky]

И в чем возникла сложность?

Answer 1

[Павел Корнилов]

Как перенести один элемент в другой?

$(другой элемент).append(один элемент);