javascript - jQuery 可放置和可拖动元素看不到对方

Question

我有可药物和可掉落的元素。
当用户点击其他元素时，元素变得可药物:

$('.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!");
                }
            })
         }
     });
})

为什么droppable元素看不到draggable元素？
我的可放置元素 - 是模式窗口中的区域。
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>

可拖动元素:

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

和可放置元素:

<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 - 是区域，我不会在其中放置可拖动元素。 CSS 实现这一切:

.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;
}

Answer 1

我认为问题来自于z-index。

尝试将 z-index 添加到 .draggable 类的 CSS 中。