CODEWITHSUNDEEP
jqueryjquery-ui-draggablejquery-ui-droppablejquery-clone
Axmed nuur
Axmed nuur

Reputation: 117

how to make Jquery draggable element append to droppable when dropped

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>

Upvotes: 2

Views: 1955

Answers (1)

Adam
Adam

Reputation: 2676

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'
        });
    }
});

Upvotes: 1

Related Questions