javascript - 如何制作多个可拖动的克隆?

时间:2013-04-17 08:29:07

标签: javascript clone draggable droppable

现在我正在尝试制作一个简单的拖放游戏。

我第一次拖放克隆工作正常,但它不允许我再拖动克隆。

所以我想创建尽可能多的克隆......我不知道该怎么做。

请先查看我的代码。

    function init(){
    var xCoordinate;
    var yCoordinate;
    var itemName;

    $('#burger, #chicken, #fries, #hotdog, #soda').draggable({
        containment: '#screen',
        start: getPosition,
        helper: 'clone',
        stop: dragStop,
        revert: 'invalid'
    });

    $('#A, #B, #C').droppable({
        drop: itemDrop
    });
}

function getPosition(event, ui){
    xCoordinate = ui.offset.left;
    yCoordinate = ui.offset.top;
};

“function getPosition”只是获取原始可拖动项目的x和y坐标,以便克隆可以放置在同一位置。

我明白我必须要'复制克隆!!'在droppable函数下,但不知道该怎么做。

1 个答案:

答案 0 :(得分:0)

代码应该为drop属性提供一个函数。此函数应克隆帮助程序并将其附加到droppable。我已经提供了一个可以应用于实现的基本示例。

<强> HTML

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<div id="drop"></div>

<强>的Javascript

$("li").draggable(
    {helper: "clone"}
);

$("#drop").droppable({
    accept: "li",
    drop: function(event,ui){
        console.log(ui.helper);
       $(this).append($(ui.helper).html());    
    }
});

工作示例 http://jsfiddle.net/2W4jA/