html - 单击 ，选择并克隆到另一个字段

Question

我想创建一个场景来帮助我通过单击并选择选项来复制一些元素。

这是一个JSFiddle ，如果你继续去现场看看。您会看到 1 个红色、1 个蓝色和 1 个绿色框。

#container {
    width:500px;
    height:600px;
    display:block;
}
#red {
    display:inline-block;
    width:50px;
    height:50px;
    background-color:red;
}
#blue {
    display:inline-block;
    width:50px;
    height:50px;
    background-color:blue;
}
#green {
    width:350px;
    height:350px;
    background-color:green;
}

HTML:

<div id="container">
    <div id="red"></div>
    <div id="blue"></div>
    <div id="green"></div>
</div> 

我的目的是通过单击“一次”选择蓝色或红色的小框之一，当我单击绿色框内的任意位置时，我想在其中进行克隆。例如，如果我单击红色，则必须选中它，当我在绿色框内单击时，我必须在框内单击多少次才能克隆它。

我应该按照什么方式来做这个，我应该从什么样的字幕开始搜索该方法？

我找到了以下链接，但对理解这个想法帮助不大； http://simonsarris.com/blog/140-canvas-moving-selectable-shapes

非常感谢您从现在开始的帮助。

Answer 1

我想出了一个办法来处理这个案子。如果没有 Javascript，您将无法处理它。而在这里我使用了 jQuery，这是我的逻辑:

1) 我创建了一个全局变量 isRedOrBlue 来识别用户选择的元素。每当我单击 red 或 blue div 时，我都会相应地更改它。

var isRedOrBlue;
$('#red').on('click', function () {
    isRedOrBlue = "red";
    // For identification, I'm adding border
    $(this).css({
        "border": "1px solid #ccc"
    });
    //Vice versa I'm removing for other
    $('#blue').css({
        "border": ""
    })
});
$('#blue').on('click', function () {
    isRedOrBlue = "blue";
    // For identification, I'm adding border
    $(this).css({
        "border": "1px solid #ccc"
    })
    //Vice versa I'm removing for other
    $('#red').css({
        "border": ""
    })
});

2) 现在，当我单击 green div 时，基于 isRedOrBlue 变量 我将是 cloning 它和 appendTo 它到绿色 div。

$('#green').on('click', function () {
    if (isRedOrBlue) { // When none selected
        console.log(isRedOrBlue)
        $('#' + isRedOrBlue).clone().appendTo($(this));
    }
});

JSFiddle

希望你能理解我上面使用的逻辑。