JSFiddle - React, Tailwind, and code Playground

HTML

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

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

    </div>

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

$(".sourceItem3").draggable({
            helper: "clone",
            connectToSortable: ".sortgroup3"
        });


        $("#ul_Target3").sortable(
        {
            receive: function (e, ui) { isOut = false; },
            over: function (e, ui) { isOut = false; },
            out: function (e, ui) { isOut = true; },

            beforeStop: function (e, ui) {
                if (isOut) {
                    $(ui.item).remove();
                }
            }
        }).disableSelection();