Редактирование текста

Всем привет, возник вопрос во время выполнения работы. У меня есть 3 блока (1 сверху и 2 сбоку) , в левом блоке содержатся карточки , которые возможно перемещать в правый блок. Как реализовать редактирование этих карточек и добавить эти карточки в верхний блок only для редактирования


<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
body, html{
  width: 100%;
  height: 100%;
  margin: 0;
}
.block {
   width: 100%;height: 100%;
   display: flex;
   flex-wrap: wrap;

}
.block > div {
   height: 50%;
   transition: .8s;
   box-sizing: border-box;
}


.block > div:nth-child(1){ width: 100%;
  background-color: red;
  

}
.block > div:nth-child(2){ width: 50%;
  background-color: yellow;
}
.block > div:nth-child(3){ width: 50%;
  background-color: green;
}

.text{
  width: 100px;
  height: 50px;
  background-color:  rgba(255, 244, 148, 1);
  border: 4px solid rgba(139, 69, 19, 1);
  border-radius: 12px;
  text-align: center;
  line-height: 50px;
}

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
$(function() {
   $( ".block >" ).sortable({
      connectWith: ".block >"
    }).disableSelection();
})
  </script>
</head>

<body>
<div class="block">

  <div></div>
  <div>

  <div class="text">test_01</div>
  <div class="text">test_02</div>
  <div class="text">test_03</div>
  <div class="text">test_04</div>
  <div class="text">test_05</div>
  
  </div>
  <div></div>
</div>



</body>
</html>

Вопрос по сути про архитектуру решения. Возникает встречный вопрос: с использованием каких технологий ты реализуешь решение. Это react+redux, vue, jquery, отсутствие библиотек? Есть ли возможность использовать vuejs, например?

Архитектура для react/vue будет одной (объект хранилище, выражающий возможные состояния карточек), если решение на чистом js, то архитектура будет другой (наверное комбинация классов, каждый).

Лучше бы если у тебя была возможность использовать react/vue

Цени не только свое время, оформляй код в песочницах типа codepen или jsfiddle. Так будет легче понять что требуется и легче помочь с решением. @dmitry правильно спросил, какие технологии тебе доступны? Какой вопрос, такой и ответ соответственно.

1 симпатия