首页 文章

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

提问于
浏览
0

现在我想做一个简单的拖放游戏 .

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

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

请先看看我的代码 .

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

    代码应该为 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());    
        }
    });
    

    Working Example http://jsfiddle.net/2W4jA/

相关问题