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>

and droppable element：

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

Answer 2

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

所以在我的情况下，我只是将这些部分分开，现在我的代码看起来像这样：

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

jQuery droppable和draggable元素没有看到对方

2 个答案: