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，你可以在jquery选择上执行.droppable和.draggable。

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

此外，您不应该在您删除的每个ui元素上重新实例化.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));
        }
    });
});

jQuery UI不止一次拖放

1 个答案: