Javascript jQuery可拖放和可拖动元素彼此看不到

我有可药物和可滴落的元素。
当用户单击其他元素时，元素将变为可药物：

$('.bank-deposit-row').on('click', function() {
    $('.reconciliation-modal').show();
    $('.cit-pickup-row').addClass('draggable');
    $('.draggable').draggable({
        revert:"invalid",
        drag: function(event, ui){
            var dragTarget = this;
            $('.modal-droppable-area').droppable({
                tolerance: "fit",
                drop: function() {
                    alert: ("Dropped!");
                }
            })
         }
     });
})

为什么可拖放元素看不到可拖放元素？
我的可拖放元素-是模式窗口中的区域。
UPD
元素，它是目标（当我单击该行时），模态窗口变为可见并激活可拖动元素

<div class="row table-row bank-deposit-row">
    <div class="col-sm-2 table-col">08-09-2017</div>
    <div class="col-sm-4 table-col">Deposit G4S - 0123456789</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>

---

我认为问题来自

z-index

---

尝试将

z-index

添加到

.draggable

类的CSS中。

此问题的原因是初始化。如果在单击可拖动元素时尝试初始化可拖放元素，则会出现相同的问题

在我的情况下，我只是将这些部分分开，现在我的代码如下所示：

$('.bank-deposit-row').on('click', function() {
$('.reconciliation-modal').show();
$('.cit-pickup-row').addClass('draggable');
$('.draggable').draggable({
    revert:"invalid",
    drag: function(event, ui){
        window.dragTarget = this;
        return dragTarget;
    }
});
$('.modal-droppable-area').droppable({
    drop: function(event, ui) {
        var droppableArea = $( this ).find('.droppable-content');
        $( this ).find('.droppable-content-info').hide();
        $(dragTarget).appendTo($(droppableArea));
        $(dragTarget).css({
            "position": "static",
            "background-color": "white",
            "margin": "5px",
            "border": "2px solid gray"
       });
    }
})
})

---

请包括所有相关代码（html）@CarstenLøvboAndersen等一下，我将添加html和css@CarstenLøvboAndersen我添加了我的代码谢谢您的帮助，但问题不在

z-index

。我想，原因在于初始化。我在单击可拖动元素的那一刻初始化了可拖放元素，当我将其分离时，它开始工作）这对你很好，它起作用了！：）对不起，我帮不了你

<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>

.se-row .reconciliation-block {
    max-width: 100%;
    width: 48%;
    float: left;
    padding-left: 15px;
    padding-right: 15px;
}
.reconciliation-block.float-right{
    margin-right: 2%;
    float: right;
}
.reconciliation-block .se-body {
    padding: 0px 0px;
    min-height: 600px;
}
.reconciliation-block .table-head-col {
    color:#888;
    border-top: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
    text-transform: uppercase;
    padding: 23px 17px 5px 5px;
    color: #888;
    background:#f9f9f9;
    min-height: 70px;
}
.reconciliation-block .se-content .table-body .table-row{
    border-bottom: 1px solid #dfdfdf;
    padding-top: 2%;
    margin-left:0;
    margin-right: 0;
}
.reconciliation-block .se-content .table-body .table-col {
    padding: 15px 17px 12px 5px;
}
.reconciliation-block .se-content .table-body .table-row:hover,
.reconciliation-block .se-content .table-body .table-row:active,
.reconciliation-block .se-content .table-body .table-row:focus {
    background-color: yellow;
    cursor: pointer;
    z-index: 1000;
}
.reconciliation-modal {
    display:none;
    position: absolute;
    z-index: 999;
    left: 10%;
    top:30%;
    right:0;
    bottom:0;
    max-height: 500px;
    background: #fff;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.reconciliation-modal .close-btn {
float: right;
text-align: right;
}
.reconciliation-modal .modal-droppable-area {
padding-top: 25%;
padding-bottom: 25%;
text-align: center;
background: #cacaca;
}

$('.bank-deposit-row').on('click', function() {
$('.reconciliation-modal').show();
$('.cit-pickup-row').addClass('draggable');
$('.draggable').draggable({
    revert:"invalid",
    drag: function(event, ui){
        window.dragTarget = this;
        return dragTarget;
    }
});
$('.modal-droppable-area').droppable({
    drop: function(event, ui) {
        var droppableArea = $( this ).find('.droppable-content');
        $( this ).find('.droppable-content-info').hide();
        $(dragTarget).appendTo($(droppableArea));
        $(dragTarget).css({
            "position": "static",
            "background-color": "white",
            "margin": "5px",
            "border": "2px solid gray"
       });
    }
})
})