JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="class1">
  <span class="item">переносимый контент1</span>
  <span class="item">переносимый контент2</span>
  <span class="item">переносимый контент3</span>
  <span class="item">переносимый контент4</span>
</div>
<div class="class2">
  <span class="item">переносимый контент5</span>
  <span class="item">переносимый контент6</span>
  <span class="item">переносимый контент7</span>
  <span class="item">переносимый контент8</span>
</div>

CSS

div span {
  display: block;
  cursor: pointer;
  margin: 10px;
  outline: 1px solid black;
}

.class1 {
  width: 200px;
  min-height: 200px;
  outline: 1px solid red;
  margin: 10px;
  padding: 10px;
  float: left;
}

.class2 {
  width: 200px;
  min-height: 200px;
  outline: 1px solid blue;
  margin: 10px;
  padding: 10px;
  float: left;
}

JavaScript

$('.item').on('click', function() {
  $(this).appendTo($(this).parent().siblings());
});