javascript - jquery 克隆不适用于 droppable

Question

我有一个 div，我可以将其拖动到其他 div，并且它工作正常。

但使用 helper: 'clone' 时，可以拖动 div，但 droppable 不起作用。

你知道如何解决这个问题吗？

jquery:

$(function () {
    $(".draggable").draggable({ helper: 'clone', revert: 'invalid' });
    $(".droppable").droppable({ 
        accept: ".draggable"
    });
});

工作示例:http://jsfiddle.net/p21z4jy0/

Answer 1

我认为您正在寻找http://jsfiddle.net/p21z4jy0/2/

$(function () {
    $(".draggable").draggable({ helper: 'clone', revert: 'invalid' });
    $(".droppable").droppable({ 
        accept: function(drag) {
            var dropId = $(this).attr('data-id');
            var dragId = $(drag).attr('data-id');
            return dropId === dragId;
        },
        drop: function (event, ui) {
            $('.droppable').append(ui.draggable);
        }
    });
});

.draggable{
    width:100px;
    border: 1px solid green;
}
.droppable {
    width: 300px;
    height: 100px;
    margin: 10px;
    border: 1px solid green;
}
.draggable {
    height:50px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="draggable" data-id='a'>draggable a</div>
<div class="droppable" data-id='a'>droppable a</div>