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

Question

Here is my live demo: https://jsfiddle.net/johndoe1992/3uqg7y9L/

1. When I click some button on the left panel it must be cloned to the right panel (see live demo)

2. The bootstrap class 'disable' must be added on click to this button from the left panel too. We have the disabled button on the left and the enabled button on the right

3. When I click some button on the right panel it must relocate back to the left panel (see live demo)

We have the enabled button on the left and no button on the right

I've tried to find a solution using this, which works for #1 and #2, but I have no idea what to do with #3

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

Thank you for your help

Answer 1

Firstly you need to use a delegated event handler to handle clicks on the buttons you dynamically add to the .selected div.

Secondly you need to add a way of identifying which button was clicked on in the .selected div and matching that with the original in the .base div. To do that you could use a data attribute. From there you can just set the disabled property state and remove() the clone. Something like this:

<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