JSFiddle - React, Tailwind, and code Playground

HTML

<p style="background: red; color: white; text-align: center">複製型</p>

    <div>
        目標 :
        <div id="ul_Target2" class="sortgroup2" style="background: #000000; width: 200px; padding: 10px; min-height: 50px"></div>

    </div>

    <div>
        來源 :
        <div id="ul_Source2" class="sortgroup2" style="background: #2f4f4f; width: 200px; padding: 10px;min-height: 50px">
            <div class="sourceItem sourceItem1">S1</div>
            <div class="sourceItem sourceItem1">S2</div>
            <div class="sourceItem sourceItem1">S3</div>
            <div class="sourceItem sourceItem1">S4</div>
            <div class="sourceItem sourceItem1">S5</div>
        </div>
    </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

$(".sourceItem1").draggable({
            helper: "clone",
            connectToSortable: ".sortgroup2"
        });

        $("#ul_Target2").sortable({
            receive: function (event, ui) {
                //改變Source 那邊的物件狀態
                $(ui.item).css("background", "gray");]

            },
            beforeStop: function (event, ui) {
                //改變Target 那邊的物件狀態
                $(ui.item).css("background", "yellow");]
            }
        }).disableSelection();