如何使 Jquery 可拖动元素在放置时附加到可放置元素

Question

Edit: I want the final cloned element to be draggable to any position in the droppable, i do not want it to be sortable.

I'm trying to append my draggable-clone element to droppable element when it is dropped. when the draggable element is inside the droppable element, i want it(the draggable element) to be draggable inside the droppable . Right now the draggable-clone element can be dragged from its position and when it is dropped it becomes undraggable. So please help me in achieving my goal. Thanks.

here is the code:

 $(function () { $('#draggable').draggable({ helper: 'clone' }); $('#droppable1, #droppable2').droppable({ drop: function (event, ui) { $(this) .append(ui.helper.clone(false).css({ position: 'relative', left: '0px', top: '0px' })); } }); });

 .well { width: 150px; height: 150px; border: 3px solid red; } .ii{ float:left; margin-top: 20px; margin-right: 20px; border: 3px solid blue; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script> <div class="well"> <div id="draggable">CONTENT</div> </div> <div id="droppable1" class="ii well col-md-3" style="z-index:-1;"></div> <div id="droppable2" class="ii well col-md-9" style="z-index:-1;"></div>

Answer 1

The initial element is created as a draggable one on the document ready event, but the new element created when you drop never has this code run on it. It needs to be added to the "drop" event:

$('#droppable1, #droppable2').droppable({
    drop: function (event, ui) {        
        $(this)
            .append(ui.helper.clone(false).css({
            position: 'relative',
            left: '0px',
            top: '0px'
        }));
        /* New stuff here: */
        $('.ui-draggable').draggable({
            helper: 'clone'
        });
    }
});