幾乎在那里，您錯過了應用于元素的helper: 'clone'config todraggable和at drop 函數.clone()
$(function() {
$(".doitcenter").draggable({
revert: "invalid",
handle: ".shapes",
helper: 'clone'
});
$(".droppable-area").droppable({
drop: function(event, ui) {
if (!$(ui.draggable).hasClass('cloned')) {
ui.draggable
.clone()
.addClass('cloned')
.appendTo(this)
.position({
my: "center center-5",
at: "center",
of: event
})
.draggable();
}
}
});
$(".free-space").on("click", ".close-button", function(e) {
$(this).closest(".doitcenter").remove();
});
});
.tool-space {
border: 10px double #005580;
min-height: 608px;
}
.free-space {
border: 10px solid #005580;
min-height: 608px;
}
.free-space .doitcenter {
width: 40px;
}
.doitcenter {
text-align: center;
}
.close-button {
font-size: 24px;
cursor: pointer;
}
.shapes {
opacity: 0.8;
margin-bottom: 10px;
}
.shapes:hover {
cursor: move;
opacity: 1;
}
<script src="https://kit.fontawesome.com/6e2154b1f7.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container">
<div class="row">
<div class="col-2">
<div class="tool-space">
<div class="ui-widget-content doitcenter mt-2">
<span class="draggable-item"><span class="close-button">×</span><i class="far fa-square fa-2x shapes"></i></span>
</div>
<div class="ui-widget-content doitcenter mt-2">
<span class="draggable-item"><span class="close-button">×</span><i class="far fa-circle fa-2x shapes"></i></span>
</div>
<div class="ui-widget-content doitcenter mt-2">
<span class="draggable-item"><span class="close-button">×</span><i class="far fa-square fa-2x shapes"></i></span>
</div>
<div class="ui-widget-content doitcenter mt-2">
<span class="draggable-item"><span class="close-button">×</span><i class="far fa-circle fa-2x shapes"></i></span>
</div>
</div>
</div>
<div class="col-10">
<div class="free-space droppable-area">
</div>
</div>
</div>
</div>
