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

Posted 2023-05-08

【中文标题】javascript - 如何制作多个可拖动的克隆？

【英文标题】：javascript - how to make multiple draggable clones?

【发布时间】：2013-04-09 22:17:26

【问题描述】：

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

我第一次拖放克隆时效果很好，但它不允许我再拖动克隆。

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

请先看看我的代码。

    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】：

代码应该为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/