javascript-如何制作多个可拖动的克隆？ [英] javascript - how to make multiple draggable clones?

问题描述

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

now I'm trying to make a simple drag and drop game.

我第一次拖放克隆文件效果很好，但是不允许我再拖一个克隆。

The first time I drag and drop a clone works fine, but it doesn't allow me to drag a clone anymore.

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

So I want to create as many clones as I drag.... and I have no idea how to do it.

请先看一下我的代码。

    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坐标，以便克隆可以放在同一位置。

"function getPosition" is simply to get x and y coordinates of the original draggable item so that the clone can be placed at the same position.

我知道我必须在droppable函数下将重复的克隆！组合起来，但不知道该怎么做。

I understand I have to comand 'duplicate clones!!' under the droppable function, but don't know how to do it.

推荐答案

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

The code should provide a function for the drop property. This function should clone the helper and append it to the droppable. I have provided a basic example which you can apply to your implementation.

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/

这篇关于javascript-如何制作多个可拖动的克隆？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！