jQuery：可拖动 div 最初创建克隆，然后在被删除后不创建
jQuery: Draggable div creating Clone initially, then not after being dropped
我有一个可拖动的 div 和一个 table。我希望能够将 div 的克隆拖放到 table 中，然后将其拖放到 table 中后，将 div 拖到 table 中从一个细胞到另一个细胞而不创建克隆。
但是目前，当我尝试将已经放入 table 的 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>
终于想到办法了！我只需要删除掉落事件中的助手。
$(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>
我有一个可拖动的 div 和一个 table。我希望能够将 div 的克隆拖放到 table 中，然后将其拖放到 table 中后，将 div 拖到 table 中从一个细胞到另一个细胞而不创建克隆。
但是目前，当我尝试将已经放入 table 的 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>
终于想到办法了！我只需要删除掉落事件中的助手。
$(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>