JSFiddle - React, Tailwind, and code Playground
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;
}