Перемещение элемента из одного DIV в другой

Question

Вот мой демо: https://jsfiddle.net/johndoe1992/3uqg7y9L/

1. Когда я нажимаю некоторые кнопки на левой панели она должна быть клонированной на правой панели (см видеодемонстрацию)

2. Класс bootstrap 'disable' должен быть добавлен при нажатии на эту кнопку с левой панели. У нас есть кнопки инвалидов слева и включена кнопка на правой

3. Когда я нажимаю некоторые кнопки на правой панели она должна переехать обратно в левую панель (см видеодемонстрации)

Мы есть включена кнопка слева и нет кнопки на правой

Я пытался найти решение, используя это, который работает на # 1 и # 2, но я понятия не имею, что делать с # 3

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

Благодарим за помощь

Answer 1

Во-первых, вам необходимо использовать делегированный обработчик событий для обработки щелчков на кнопках, которые вы динамически добавляете в div .selected.

Во-вторых, вам нужно добавить способ определения, какая кнопка была нажата в поле .selected, и сопоставить это с оригиналом в div .base. Для этого вы можете использовать атрибут 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