JSFiddle - React, Tailwind, and code Playground

by no2don

HTML

<p style="background: red; color: white; text-align: center">複製 可丟棄 且不能重複加入</p>

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

    <div>
        來源 :
        <div id="ul_Source4" class="sortgroup4" style="background: #2f4f4f; width: 200px; padding: 10px;min-height: 50px">
            <div id="s1" class="sourceItem sourceItem4">S1</div>
            <div id="s2" class="sourceItem sourceItem4">S2</div>
            <div id="s3" class="sourceItem sourceItem4">S3</div>
            <div id="s4" class="sourceItem sourceItem4">S4</div>
            <div id="s5" class="sourceItem sourceItem4">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

$(".sourceItem4").draggable({
            helper: "clone",
            connectToSortable: ".sortgroup4"
        });


        var tmpItem;
        var isOut;
        $("#ul_Target4").sortable(
        {
            receive: function (event, ui) {
                isOut = false;
                $(tmpItem).attr("data-mark", $(ui.item).attr('id'));

                if (CheckElementDuplicate($(ui.item).attr('id'), 'ul_Target4')) {
                    $(tmpItem).remove();
                }

            },



            over: function (e, ui) { isOut = false; },
            out: function (e, ui) { isOut = true; },
            beforeStop: function (e, ui) {
                tmpItem = $(ui.item);
                if (isOut) {
                    $(ui.item).remove();
                }





            }
        }).disableSelection();


        function CheckElementDuplicate(checkId, containerId) {

            $('#log1').append($('#' + containerId).children().length + ',');

            var res = false;

            for (var i = 0; i < $('#' + containerId).children().length - 1; i++) {
                if ($('#' + containerId).children().eq(i).data('mark') == checkId) {
                    res = true;
                    break;
                }
            }
            return res;
        }