jQuery克隆无法在droppable上工作

Question

I have a div that i can drag to other div, and its working fine.

But with helper: 'clone', its possible to drag the div, but the droppable its not working.

Do you know how to fix this?

jquery:

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

working example: http://jsfiddle.net/p21z4jy0/

Answer 1

I think you are looking 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>