javascript - 将元素从一个 div 移动到另一个 div

Question

这是我的现场演示:https://jsfiddle.net/johndoe1992/3uqg7y9L/

1. 当我单击左侧面板上的某个按钮时，它必须克隆到右侧面板(请参阅实时演示)

2. 从左侧面板单击此按钮时也必须添加 Bootstrap 类“禁用”。我们的左侧有禁用按钮，右侧有启用按钮

3. 当我单击右侧面板上的某个按钮时，它必须重新定位回左侧面板(请参阅现场演示)

左侧有启用按钮，右侧没有按钮

我尝试使用此方法找到一个解决方案，该解决方案适用于 #1 和 #2，但我不知道如何处理 #3

$(this).clone().appendTo('.selected');
$(this).prop('disabled', true);

感谢您的帮助

Answer 1

首先，您需要使用委托(delegate)事件处理程序来处理动态添加到 .selected div 的按钮上的点击。

其次，您需要添加一种方法来识别在 .selected div 中单击了哪个按钮，并将其与 .base div 中的原始按钮进行匹配。为此，您可以使用 data 属性。从那里您只需设置 disabled 属性状态并remove() 克隆即可。像这样的事情:

<div class="base">
    <button type="button" class="btn btn-default" data-state="default">Text 1</button>
    <button type="button" class="btn btn-primary" data-state="primary">Text 2</button>
    <button type="button" class="btn btn-info" data-state="info">Text 3</button>
    <button type="button" class="btn btn-warning" data-state="warning">Text 4</button>
    <button type="button" class="btn btn-success" data-state="success">Text 5</button>
    <button type="button" class="btn btn-danger" data-state="danger">Text 6</button>
</div>
<div class="selected"></div>

$(document).on('click', '.btn', function() {
    if($(this).parent().attr("class") == "base") {
        $(this).clone().appendTo('.selected');
        $(this).prop('disabled', true);
    }
    else {
        $('.base').find('[data-state="' + $(this).data('state') + '"]').prop('disabled', false);
        $(this).remove();
    }
});

Updated fiddle