Question

I’m currently working on a script that will allow users to drag decoration images over a Christmas tree to decorate it. I’m using jquery-ui to make images displayed in a side-bar draggable over the tree. It works, sort of. For some reason, after I drag the image onto the tree, you are no longer able to move it and aren’t able to create another draggable over the tree either, as the original image is no longer draggable.

Here’s the code I’ve come up with:

$(document).ready(function () {
$('[clickable]').click(function () {
    if ( $(this).attr('targets') )
    {
        $($(this).attr('targets')).css('background-image', 'url(' + $(this).attr('src') + ')');
    }
});

$('[draggable]').each(function () {
    $(this).css('z-index', '30');
    $(this).draggable({
    revert: \"invalid\"
    //, zIndex: 999
    , helper: 'clone'
     , containment: '#panel'
     , appendTo: '#' + $(this).attr('targets')
    });
});

$('[droppable]').each(function () {
    $(this).css('z-index', '-20');
    $(this).droppable({
        accept: '[targets=' + $(this).attr('id') + ']'
        , drop: function (e, ui) {
            $(this).append($(ui));
            $(ui).draggable({
                revert: \"invalid\"
                //, zIndex: 999
                 , containment: '#top'
                 , appendTo: '#top'//'#' + $(this).attr('targets')
                });
        }
    });
});
});

and the html:

<div id="drop_area" droppable="droppable">
        <div id="canvas" droppable="droppable">
            <div id="background" droppable="droppable">
                <div id="tree" droppable="droppable">

                </div>
            </div>
        </div>

        <div id="selectors">
            <img src="./images/dressup/largepinkbow.png" draggable="draggable" targets="tree" />
        </div>

    </div>

Answer 1

You are approaching some of this the wrong way. Instead if using the $.each you can just do .droppable and .draggable on the jquery selection.

$('[draggable]').draggable({...})

Also you should not be reinstantiating the .draggable() plugin on each ui element you drop. All you have to do is define it for that element once and then it will be draggable for the remainder of its life on the dom.

Something like:

$('[draggable]')
.css('z-index', '30')
.draggable({
    revert: "invalid"
    //, zIndex: 999
    , helper: 'clone'
     , containment: '#panel'
     , appendTo: '[droppable]'
    });
});

$('[droppable]')
    .css('z-index', '-20');
    .droppable({
        accept: '[draggable]'
        , drop: function (e, ui) {
            $(this).append($(ui));
        }
    });
});