Почему jquery-ui draggable и droppable друг друга не видят?

Есть модалка:

<div class="reconciliation-modal col-sm-5">
    <div class="modal-header col-sm-12">
        <div class="row main-modal-header">
            <h2 class="col-sm-8">Reconcile</h2>
            <button class="close-btn">
                <span class="glyphicon glyphicon-remove"></span>
            </button>
        </div>
        <div class="modal-semi-header row">
            <div class="col-sm-2">Date</div>
            <div class="col-sm-4">Description</div>
            <div class="col-sm-2">Currency</div>
            <div class="col-sm-2">Amount</div>
            <div class="col-sm-2">Reconciled</div>
        </div>
        <div class="modal-semi-header-content row">
            <div class="col-sm-2">07-09-2017</div>
            <div class="col-sm-4">Deposit G4S - 0123456789</div>
            <div class="col-sm-2">EURO</div>
            <div class="col-sm-2">14.055,00</div>
            <div class="col-sm-2"></div>
        </div>
    </div>
    <div class="modal-droppable-area col-sm-12">
        <div class="droppable-content">
            Drag transactions here
        </div>
    </div>
    <div class="modal-footer row">
        <button class="modal-btn-save col-sm-3">Save & Close</button>
        <div class="float-right col-sm-4">Discrepancy: <span class="discrepancy-sum">3.650</span></div>
    </div>
</div>

В ней блок с классом modal-droppable-area - это droppable элемент.
И есть перетягиваемый элемент:

<div class="row table-row cit-pickup-row">
    <div class="col-sm-2 table-col">08-09-2017</div>
    <div class="col-sm-4 table-col">The Boathouse<br>Javastraat</div>
    <div class="col-sm-2 table-col">EURO</div>
    <div class="col-sm-2 table-col">14.055,00</div>
    <div class="col-sm-2 table-col"></div>
</div>

Он становится draggable только после клика на другой блок.
Словом, скрипт на jQuery выглядит примерно так:

$('.bank-deposit-row').on('click', function() {
$('.reconciliation-modal').show();
$('.cit-pickup-row').addClass('draggable');
$('.draggable').draggable({revert:"invalid"});
$('.draggable').on('click', function() {
    var target = this;
    console.log(target);
    $('.modal-droppable-area').droppable({
    tolerance: "fit",
    drop: function(event, ui ) {
    $( this ).find(".droppable-content").html(target);
    }
});
})

}) Перетягивание работает, но droppable поле не видит, что в него закидывают draggable элемент. В чём может быть ошибка?