Я пытаюсь скопировать div из списка поверх изображения, чтобы div можно было включить в изображение. Перетаскивание работает хорошо, за исключением того, что когда div-ы перетаскиваются в drop -abled, их нельзя перетаскивать снова. В этом примере мне нужно несколько раз перетащить «Имя пациента» в раскрывающийся список. Любая помощь с благодарностью! Это код:
<!DOCTYPE html>
<html>
<head>
<style>
.draggable {
width: 250px;
height: 20px;
background: #fff;
padding: 10px;
border: 1px solid black;
margin: 5px;
}
.draggable:hover {
cursor: pointer;
}
.droppable {
border: 1px solid black;
width: 600px;
height: 800px;
background: lightgrey;
margin: 5px;
}
.table {
display: table;
}
.tableRow {
display: table-row;
}
.tableCol {
display: table-cell;
vertical-align: top;
}
.leftCol {
}
.rightCol {
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="table">
<div class="tableRow">
<div class="tableCol leftCol">
<div>
<img src="sample-1.jpg" class="droppable" style="width: 600px"><br>
<img src="sample-2.jpg" class="droppable" style="width: 600px">
</div>
</div>
<div class="tableCol rightCol">
<div class="draggable">Patient Name</div>
<div class="draggable">Owner Name</div>
<div class="draggable">Owner Address</div>
</div>
</div>
</div>
<script type="text/javascript">
$('.draggable').draggable({
revert: "invalid",
stack: ".draggable",
helper: function (e, ui) {
return $(this).clone();
},
stop: function (e, ui) {
$('.draggable').draggable().data()["ui-draggable"].cancelHelperRemoval = true;
},
});
$('.droppable').droppable({
accept: ".draggable",
drop: function (event, ui) {
var droppable = $(this);
var draggable = ui.draggable;
var newClone = $(ui.helper).clone();
newClone.draggable();
$(this).append(newClone);
},
});
</script>
</body>
</html>
вот скрипка