jquery html duplicating on drag and drop - html

Question

I am using jQuery and using a drag and drop function. My image keeps duplicating and I have no idea why. Any help would be great. I am pretty sure my issue is at line:
$('#' + seat).append('<div class="studentCard" id="' + id + '"><img class="studentImage" src="Images/' + id + '.jpg" style="height:150px; width:150px;" />' + student + '</div>');
Here is my function:
$('.seat').droppable({
drop: function (event, ui) {
var seat = $(this).attr('id');
var id = $(ui.draggable).attr('id');
var student = $(ui.draggable).html();
$.ajax({
success: function () {
if ($('#' + seat + '> div').length > 0) {
alert('Desk already occupied');
}
else {
$(ui.draggable).remove();
$('#' + seat).append('<div class="studentCard" id="' + id + '"><img class="studentImage" src="Images/' + id + '.jpg" style="height:150px; width:150px;" />' + student + '</div>');
$('div#' + id).draggable({
helper: 'clone'
});
}
}
});
}
});

Answer 1

Consider the following example. You might also consider using Sortable instead.
$(function() {
function moveStudent(source, target) {
$(target).append($(".student", source).detach());
}
$(".student").draggable({
helper: "clone",
revert: "invalid",
zIndex: 100
});
$(".seat").droppable({
accept: function() {
if ($(this).children().length == 0) {
return true;
}
return false;
},
drop: function(event, ui) {
moveStudent(ui.draggable.parent(), this);
}
});
});
.seat {
width: 150px;
height: 150px;
float: left;
margin: 10px;
}
.student {
display: inline-block;
width: 140px;
height: 140px;
border: 1px solid #CCC;
position: relative;
background-color: #FFFFFF;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin: 5px;
}
.studentName {
position: absolute;
top: 120px;
left: 5px;
font-size: 11pt;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="seat-1" class="seat ui-widget-header">
<div id="student-1" class="student" style="background-image: url('https://i.imgur.com/QjxuZB5.png');" data-student-id="1001">
<div class="studentName">Thomas</div>
</div>
</div>
<div id="seat-2" class="seat ui-widget-header">
<div id="student-2" class="student" style="background-image: url('https://imgur.com/Gvmj4y5.png');" data-student-id="1002">
<div class="studentName">Trinity</div>
</div>
</div>
<div id="seat-3" class="seat ui-widget-header">
</div>
<div id="seat-4" class="seat ui-widget-header">
</div>
Instead of creating a new element, you can use .detach() and more easily move the original draggable item to the new drop zone.
It is sometimes better to use accept option to determine if a droppable should accept an item or not. This option does allow the use of a Function:
Function: A function that will be called for each draggable on the page (passed as the first argument to the function). The function must return true if the draggable should be accepted.
See More: https://api.jqueryui.com/droppable/#option-accept
This allows you to re-arrange the items without stacking.