2

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>
Axmed nuur
  • 117
  • 2
  • 16
  • Possible duplicate of [Drop a sortable into a sortable (nested divs)](http://stackoverflow.com/questions/39348112/drop-a-sortable-into-a-sortable-nested-divs) – Dekel Sep 20 '16 at 20:09

1 Answers1

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'
        });
    }
});
Adam
  • 2,446
  • 1
  • 13
  • 16
  • I want the final cloned element to be draggable to any position in the droppable, i do not want it to be sortable. – Axmed nuur Sep 21 '16 at 11:23