Блог

В настоящее время я работаю над сценарием, который позволит пользователям перетаскивать изображения украшений на рождественскую елку, чтобы украсить ее. Я использую 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>
  

Вы подходите к чему-то из этого неправильно. Вместо этого, если вы используете $.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));
        }
    });
});