CODEWITHSUNDEEP
javascriptjquery
Krishna
Krishna

Reputation: 1362

clone should not work in child div

I am having a issue here... There are two div first and second.I just cloned the first div which is draggable to the droppable second div. My requirement is to drag the cloned div also in the second div.The problem is the div in second ,when i drag also get cloned...

The code is

<div class="first"></div>
<div class="second"></div>
<script type="text/javascript">
    $('.first').draggable({
        helper: 'clone'
    });
    $('.second').droppable({
        drop: function (event, ui) {
            $(this).append(ui.draggable.clone());
            $('.second .first').draggable({
                drop: function (event, ui) {
                    $(this).remove().clone();
                }
            });
        }
    });

</script>

Upvotes: 1

Views: 66

Answers (1)

Pete
Pete

Reputation: 58422

You could add a class to the clone and then check to see if that the dropped object has that class before cloning it again:

$('.second').droppable({
    drop: function (event, ui) {
        if (!ui.draggable.hasClass('clone')) {
            $(this).append(ui.draggable.clone().addClass('clone'));
            $('.second .first').draggable({
                drop: function (event, ui) {
                    $(this).remove().clone();
                }
            });
        }
    }
});

Example

Upvotes: 1

Related Questions