JSFiddle - React, Tailwind, and code Playground

HTML

<p style="background: red; color: white;text-align:center">
  基本款</p>
<div>
  目標 :
  <ul id="ul_Target1" class="sortgroup1" style="background: #000000; width: 200px; padding: 10px;min-height: 50px">xxx</ul>
</div>

<div>
  來源 :
  <ul id="ul_Source1" class="sortgroup1" style="background: #2f4f4f; width: 200px; padding: 10px;min-height: 50px">
    <li class="sourceItem">S1</li>
    <li class="sourceItem">S2</li>
    <li class="sourceItem">S3</li>
    <li class="sourceItem">S4</li>
    <li class="sourceItem">S5</li>

  </ul>
</div>

CSS

<link href="//code.jquery.com/ui/1.11.3/jquery-ui.min.css" rel="stylesheet" />
  
  
  <style> ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
  }
  
  .sourceItem {
    background: #ff00ff;
    color: white;
    width: 50px;
    height: 50px;
    margin: 5px;
    padding: 5px;
  }
  
  </style>

JavaScript

$(function () {
            $("#ul_Target1, #ul_Source1").sortable({
                connectWith: ".sortgroup1"
            }).disableSelection();
        });