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>

我的目的是通过点击“ONCE”选择其中一个蓝色或红色的小方框，当我点击绿色方框内的任何地方时，我想在里面克隆。例如，如果我点击红色，它必须被选中，当我在绿色框内单击时，我必须克隆它多次，因为我在框内单击。

我应该遵循哪种方式来执行此操作以及我应该开始搜索该方法的哪种字幕？

我发现以下链接，但得到这个想法并没有多大帮助; http://simonsarris.com/blog/140-canvas-moving-selectable-shapes

非常感谢你们的帮助。

Answer 1

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

1）我创建了一个全局变量 isRedOrBlue 来标识用户选择的元素。每当我点击红色或蓝色 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

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

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

1 个答案:

JSFiddle