jQuery UI Перетаскивание более одного раза

Question

В настоящее время я работаю над сценарием, который позволит пользователям перетаскивать изображения украшения на елку, чтобы украсить ее.Я использую jquery-ui, чтобы изображения, отображаемые в боковой панели, перетаскивались по дереву.Это работает, вроде.По какой-то причине после того, как я перетащил изображение на дерево, вы больше не можете его перемещать и не можете создать еще один перетаскиваемый элемент поверх дерева, поскольку исходное изображение больше не перетаскивается.

Вот код, который я придумал:

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

и 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

Вы к чему-то подходите неправильно. Вместо этого, если вы используете $ .each, вы можете просто сделать .droppable и .draggable при выборе jquery.

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

Кроме того, вам не следует переустанавливать плагин .draggable () для каждого удаляемого элемента пользовательского интерфейса. Все, что вам нужно сделать, это определить его для этого элемента один раз, и тогда он будет перетаскиваться до конца своей жизни в DOM.

Что-то вроде:

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