jQuery：最初创建克隆的可拖动 div，然后在被删除后不会
Posted
技术标签:
【中文标题】jQuery：最初创建克隆的可拖动 div，然后在被删除后不会【英文标题】：jQuery: Draggable div creating Clone initially, then not after being dropped 【发布时间】：2021-11-22 01:39:16 【问题描述】：我有一个可拖动的 div 和一个表格。我希望能够将 div 的克隆拖放到表中，然后将其拖放到表中后，将表中的 div 从一个单元格拖动到另一个单元格而不创建克隆。
但是，目前当我尝试将已放入表格中的 div 从一个单元格拖到另一个单元格时，它会创建一个副本。我怎样才能避免这种情况？
$(function()
$( ".draggable" ).draggable(
helper: "clone",
revert: "invalid",
connectToSortable: "#droppable"
);
$('.droppable td').droppable(
drop: function (event, ui)
var parenttd = $(this).attr('id');
var cloned = $(ui.helper).clone();
cloned.attr("visible", "true");
$(this).append(cloned);
cloned.css(
"position:": "relative",
"top": "auto",
"left": "auto"
);
cloned.draggable(
revert: "invalid",
connectToSortable: "#droppable"
);
)
);<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
<script src="https://unpkg.com/bootstrap@4.4.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="draggable kalender-element">Test</div>
<table class="droppable table table-hover table-bordered">
<thead style="text-align:center;">
<tr>
<th class="align-middle" scope="col" rowspan=3>Kalenderwoche<br>39</th>
<th scope="col" colspan=2>Montag</th>
<th scope="col" colspan=2>Dienstag</th>
<th scope="col" colspan=2>Mittwoch</th>
<th scope="col" colspan=2>Donnerstag</th>
<th scope="col" colspan=2>Freitag</th>
</tr>
</tr>
<th scope="col" colspan=2>27.09.2021</th>
<th scope="col" colspan=2>28.09.2021</th>
<th scope="col" colspan=2>29.09.2021</th>
<th scope="col" colspan=2>30.09.2021</th>
<th scope="col" colspan=2>01.10.2021</th>
</tr>
</tr>
<th scope="col">Vormittag</th>
<th scope="col">Nachmittag</th>
<th scope="col">Vormittag</th>
<th scope="col">Nachmittag</th>
<th scope="col">Vormittag</th>
<th scope="col">Nachmittag</th>
<th scope="col">Vormittag</th>
<th scope="col">Nachmittag</th>
<th scope="col">Vormittag</th>
<th scope="col">Nachmittag</th>
</tr>
</thead>
<tbody>
<tr style="background-color: #ececec" >
<th id="sortable" scope="row">1</th>
<td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; ">
Hotline</a> <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" ">
Ticket-Support</a> <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; ">
Servicepoint</a> <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" >
</td>
</tr>
<tr >
<th id="sortable" scope="row">2</th>
<td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" ">
Ticket-Support</a> <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; ">
Servicepoint</a>
</td>
<td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; ">
Hotline</a> <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" ">
Ticket-Support</a>
</td>
<td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" >
</td>
</tr>
<tr >
<th id="sortable" scope="row">3</th>
<td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; ">
Servicepoint</a> <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; ">
Hotline</a>
</td>
<td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; ">
Hotline</a>
</td>
<td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" >
</td>
</tr>
<tr >
<th id="sortable" scope="row">4</th>
<td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; ">
Hotline</a> <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; ">
Servicepoint</a>
</td>
<td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" ">
Ticket-Support</a>
</td>
<td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" ">
Ticket-Support</a>
</td>
</tr>
<tr >
<th id="sortable" scope="row">5</th>
<td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" ">
Ticket-Support</a>
</td>
<td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; ">
Servicepoint</a> <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; ">
Hotline</a>
</td>
<td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" >
</td>
</tr>
<tr >
<th id="sortable" scope="row">6</th>
<td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; ">
Servicepoint</a>
</td>
<td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" ">
Ticket-Support</a> <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; ">
Hotline</a>
</td>
<td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" ">
Ticket-Support</a> <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; ">
Servicepoint</a>
</td>
<td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; ">
Hotline</a>
</td>
</tr>
<tr >
<th id="sortable" scope="row">7</th>
<td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; ">
Servicepoint</a> <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" ">
Ticket-Support</a>
</td>
<td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; ">
Hotline</a> <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; ">
Servicepoint</a>
</td>
</tr>
<tr >
<th id="sortable" scope="row">8</th>
<td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; ">
Hotline</a>
</td>
<td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" ">
Ticket-Support</a>
</td>
<td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; ">
Servicepoint</a>
</td>
<td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" >
</td>
</tr>
</tbody>
</table>【问题讨论】：
【参考方案1】：我终于找到办法了！我只需要在 drop-event 中删除 helper。
$(function()
$( ".draggable" ).draggable(
helper: "clone",
revert: "invalid",
connectToSortable: "#droppable"
);
$('.droppable td').droppable(
drop: function (event, ui)
var parenttd = $(this).attr('id');
var cloned = $(ui.helper).clone();
cloned.attr("visible", "true");
$(this).append(cloned);
cloned.css(
"position:": "relative",
"top": "auto",
"left": "auto"
);
cloned.draggable(
revert: "invalid",
connectToSortable: "#droppable"
);
$(ui.helper).remove();
)
);<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
<script src="https://unpkg.com/bootstrap@4.4.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="draggable kalender-element">Test</div>
<table class="droppable table table-hover table-bordered">
<thead style="text-align:center;">
<tr>
<th class="align-middle" scope="col" rowspan=3>Kalenderwoche<br>39</th>
<th scope="col" colspan=2>Montag</th>
<th scope="col" colspan=2>Dienstag</th>
<th scope="col" colspan=2>Mittwoch</th>
<th scope="col" colspan=2>Donnerstag</th>
<th scope="col" colspan=2>Freitag</th>
</tr>
</tr>
<th scope="col" colspan=2>27.09.2021</th>
<th scope="col" colspan=2>28.09.2021</th>
<th scope="col" colspan=2>29.09.2021</th>
<th scope="col" colspan=2>30.09.2021</th>
<th scope="col" colspan=2>01.10.2021</th>
</tr>
</tr>
<th scope="col">Vormittag</th>
<th scope="col">Nachmittag</th>
<th scope="col">Vormittag</th>
<th scope="col">Nachmittag</th>
<th scope="col">Vormittag</th>
<th scope="col">Nachmittag</th>
<th scope="col">Vormittag</th>
<th scope="col">Nachmittag</th>
<th scope="col">Vormittag</th>
<th scope="col">Nachmittag</th>
</tr>
</thead>
<tbody>
<tr style="background-color: #ececec" >
<th id="sortable" scope="row">1</th>
<td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; ">
Hotline</a> <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" ">
Ticket-Support</a> <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; ">
Servicepoint</a> <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" >
</td>
</tr>
<tr >
<th id="sortable" scope="row">2</th>
<td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" ">
Ticket-Support</a> <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; ">
Servicepoint</a>
</td>
<td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; ">
Hotline</a> <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" ">
Ticket-Support</a>
</td>
<td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" >
</td>
</tr>
<tr >
<th id="sortable" scope="row">3</th>
<td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; ">
Servicepoint</a> <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; ">
Hotline</a>
</td>
<td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; ">
Hotline</a>
</td>
<td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" >
</td>
</tr>
<tr >
<th id="sortable" scope="row">4</th>
<td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; ">
Hotline</a> <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; ">
Servicepoint</a>
</td>
<td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" ">
Ticket-Support</a>
</td>
<td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" ">
Ticket-Support</a>
</td>
</tr>
<tr >
<th id="sortable" scope="row">5</th>
<td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" ">
Ticket-Support</a>
</td>
<td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; ">
Servicepoint</a> <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; ">
Hotline</a>
</td>
<td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" >
</td>
</tr>
<tr >
<th id="sortable" scope="row">6</th>
<td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; ">
Servicepoint</a>
</td>
<td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" ">
Ticket-Support</a> <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; ">
Hotline</a>
</td>
<td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" ">
Ticket-Support</a> <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; ">
Servicepoint</a>
</td>
<td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; ">
Hotline</a>
</td>
</tr>
<tr >
<th id="sortable" scope="row">7</th>
<td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; ">
Servicepoint</a> <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" ">
Ticket-Support</a>
</td>
<td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; ">
Hotline</a> <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; ">
Servicepoint</a>
</td>
</tr>
<tr >
<th id="sortable" scope="row">8</th>
<td class="kalender-cell" id="1_27.09.2021_Vormittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#ff0000; color: white; ">
Hotline</a>
</td>
<td class="kalender-cell" id="1_27.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="2_28.09.2021_Vormittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" ">
Ticket-Support</a>
</td>
<td class="kalender-cell" id="2_28.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="3_29.09.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="3_29.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="4_30.09.2021_Vormittag" title="Neuer Eintrag" >
<a title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element" style=" background-color:#5c67ff; color: white; ">
Servicepoint</a>
</td>
<td class="kalender-cell" id="4_30.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="5_01.10.2021_Vormittag" title="Neuer Eintrag" >
</td>
<td class="kalender-cell" id="5_01.10.2021_Nachmittag" title="Neuer Eintrag" >
</td>
</tr>
</tbody>
</table>【讨论】：
以上是关于jQuery：最初创建克隆的可拖动 div，然后在被删除后不会的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 jquery ui 使拖动和克隆的元素再次可拖动？