I have divs outside a table (.draggable) and divs inside a table (.dropped-draggable), which are both draggable but behave slightly different. When I drop a .draggable into the table, I clone the helper, append it to the div and give it the .dropped-draggable class. However, to make this one draggable, it seems I need to initialize the draggable() with all it's data anew.
Is there a way I can tell the div to use draggable data that already exists (in this case for the .dropped-draggable class)?
$(function() {
$( ".draggable" ).draggable(
{ helper: "clone",
revert: "invalid",
connectToSortable: "#droppable"
});
$(".dropped-draggable").draggable({
revert: "invalid",
connectToSortable: "#droppable"
});
$('.droppable td').droppable({
drop: function (event, ui) {
$(ui.helper).remove();
var cloned = $(ui.helper).clone();
$(this).append(cloned);
cloned.css({
"top": "",
"left": ""
});
cloned.removeClass("draggable");
cloned.addClass("dropped-draggable");
/* This is the part I'd like to avoid, especially once/if I add more functions to draggable */
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="1_28.09.2021_Vormittag" title="Neuer Eintrag">
</td>
<td class="kalender-cell" id="1_28.09.2021_Nachmittag" title="Neuer Eintrag" >
<a id="32" title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element dropped-draggable" style=" background-color:#ff0000; color: white; ">
Hotline</a> <td class="kalender-cell" id="1_29.09.2021_Vormittag" title="Neuer Eintrag">
</td>
<td class="kalender-cell" id="1_29.09.2021_Nachmittag" title="Neuer Eintrag" >
<a id="165" title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element dropped-draggable" style=" ">
Ticket-Support</a> <td class="kalender-cell" id="1_30.09.2021_Vormittag" title="Neuer Eintrag">
</td>
<td class="kalender-cell" id="1_30.09.2021_Nachmittag" title="Neuer Eintrag" >
<a id="33" title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element dropped-draggable" style=" background-color:#5c67ff; color: white; ">
Servicepoint</a> <td class="kalender-cell" id="1_01.10.2021_Vormittag" title="Neuer Eintrag">
</td>
<td class="kalender-cell" id="1_01.10.2021_Nachmittag" title="Neuer Eintrag" >
</td>
</tr>
<tr >
<th id="sortable" scope="row">13</th>
<td class="kalender-cell" id="13_27.09.2021_Vormittag" title="Neuer Eintrag">
</td>
<td class="kalender-cell" id="13_27.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="13_28.09.2021_Vormittag" title="Neuer Eintrag">
</td>
<td class="kalender-cell" id="13_28.09.2021_Nachmittag" title="Neuer Eintrag" >
<a id="165" title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element dropped-draggable" style=" ">
Ticket-Support</a> <td class="kalender-cell" id="13_29.09.2021_Vormittag" title="Neuer Eintrag">
<a id="33" title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element dropped-draggable" style=" background-color:#5c67ff; color: white; ">
Servicepoint</a>
</td>
<td class="kalender-cell" id="13_29.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="13_30.09.2021_Vormittag" title="Neuer Eintrag">
</td>
<td class="kalender-cell" id="13_30.09.2021_Nachmittag" title="Neuer Eintrag" >
<a id="32" title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element dropped-draggable" style=" background-color:#ff0000; color: white; ">
Hotline</a> <td class="kalender-cell" id="13_01.10.2021_Vormittag" title="Neuer Eintrag">
<a id="165" title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element dropped-draggable" style=" ">
Ticket-Support</a>
</td>
<td class="kalender-cell" id="13_01.10.2021_Nachmittag" title="Neuer Eintrag" >
</td>
</tr>
<tr >
<th id="sortable" scope="row">15</th>
<td class="kalender-cell" id="15_27.09.2021_Vormittag" title="Neuer Eintrag">
</td>
<td class="kalender-cell" id="15_27.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="15_28.09.2021_Vormittag" title="Neuer Eintrag">
</td>
<td class="kalender-cell" id="15_28.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="15_29.09.2021_Vormittag" title="Neuer Eintrag">
</td>
<td class="kalender-cell" id="15_29.09.2021_Nachmittag" title="Neuer Eintrag" >
<a id="33" title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element dropped-draggable" style=" background-color:#5c67ff; color: white; ">
Servicepoint</a> <td class="kalender-cell" id="15_30.09.2021_Vormittag" title="Neuer Eintrag">
<a id="32" title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element dropped-draggable" style=" background-color:#ff0000; color: white; ">
Hotline</a>
</td>
<td class="kalender-cell" id="15_30.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="15_01.10.2021_Vormittag" title="Neuer Eintrag">
<a id="32" title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element dropped-draggable" style=" background-color:#ff0000; color: white; ">
Hotline</a>
</td>
<td class="kalender-cell" id="15_01.10.2021_Nachmittag" title="Neuer Eintrag" >
</td>
</tr>
<tr >
<th id="sortable" scope="row">18</th>
<td class="kalender-cell" id="18_27.09.2021_Vormittag" title="Neuer Eintrag">
</td>
<td class="kalender-cell" id="18_27.09.2021_Nachmittag" title="Neuer Eintrag" >
<a id="32" title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element dropped-draggable" style=" background-color:#ff0000; color: white; ">
Hotline</a> <td class="kalender-cell" id="18_28.09.2021_Vormittag" title="Neuer Eintrag">
<a id="33" title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element dropped-draggable" style=" background-color:#5c67ff; color: white; ">
Servicepoint</a>
</td>
<td class="kalender-cell" id="18_28.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="18_29.09.2021_Vormittag" title="Neuer Eintrag">
</td>
<td class="kalender-cell" id="18_29.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="18_30.09.2021_Vormittag" title="Neuer Eintrag">
<a id="165" title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element dropped-draggable" style=" ">
Ticket-Support</a>
</td>
<td class="kalender-cell" id="18_30.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="18_01.10.2021_Vormittag" title="Neuer Eintrag">
</td>
<td class="kalender-cell" id="18_01.10.2021_Nachmittag" title="Neuer Eintrag" >
<a id="165" title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element dropped-draggable" style=" ">
Ticket-Support</a>
</td>
</tr>
<tr >
<th id="sortable" scope="row">19</th>
<td class="kalender-cell" id="19_27.09.2021_Vormittag" title="Neuer Eintrag">
<a id="165" title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element dropped-draggable" style=" ">
Ticket-Support</a>
</td>
<td class="kalender-cell" id="19_27.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="19_28.09.2021_Vormittag" title="Neuer Eintrag">
</td>
<td class="kalender-cell" id="19_28.09.2021_Nachmittag" title="Neuer Eintrag" >
<a id="33" title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element dropped-draggable" style=" background-color:#5c67ff; color: white; ">
Servicepoint</a> <td class="kalender-cell" id="19_29.09.2021_Vormittag" title="Neuer Eintrag">
<a id="32" title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element dropped-draggable" style=" background-color:#ff0000; color: white; ">
Hotline</a>
</td>
<td class="kalender-cell" id="19_29.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="19_30.09.2021_Vormittag" title="Neuer Eintrag">
</td>
<td class="kalender-cell" id="19_30.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="19_01.10.2021_Vormittag" title="Neuer Eintrag">
</td>
<td class="kalender-cell" id="19_01.10.2021_Nachmittag" title="Neuer Eintrag" >
</td>
</tr>
<tr >
<th id="sortable" scope="row">14</th>
<td class="kalender-cell" id="14_27.09.2021_Vormittag" title="Neuer Eintrag">
<a id="33" title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element dropped-draggable" style=" background-color:#5c67ff; color: white; ">
Servicepoint</a>
</td>
<td class="kalender-cell" id="14_27.09.2021_Nachmittag" title="Neuer Eintrag" >
<a id="165" title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element dropped-draggable" style=" ">
Ticket-Support</a> <td class="kalender-cell" id="14_28.09.2021_Vormittag" title="Neuer Eintrag">
<a id="32" title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element dropped-draggable" style=" background-color:#ff0000; color: white; ">
Hotline</a>
</td>
<td class="kalender-cell" id="14_28.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="14_29.09.2021_Vormittag" title="Neuer Eintrag">
</td>
<td class="kalender-cell" id="14_29.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="14_30.09.2021_Vormittag" title="Neuer Eintrag">
</td>
<td class="kalender-cell" id="14_30.09.2021_Nachmittag" title="Neuer Eintrag" >
<a id="165" title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element dropped-draggable" style=" ">
Ticket-Support</a> <td class="kalender-cell" id="14_01.10.2021_Vormittag" title="Neuer Eintrag">
<a id="33" title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element dropped-draggable" style=" background-color:#5c67ff; color: white; ">
Servicepoint</a>
</td>
<td class="kalender-cell" id="14_01.10.2021_Nachmittag" title="Neuer Eintrag" >
<a id="32" title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element dropped-draggable" style=" background-color:#ff0000; color: white; ">
Hotline</a>
</td>
</tr>
<tr >
<th id="sortable" scope="row">16</th>
<td class="kalender-cell" id="16_27.09.2021_Vormittag" title="Neuer Eintrag">
</td>
<td class="kalender-cell" id="16_27.09.2021_Nachmittag" title="Neuer Eintrag" >
<a id="33" title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element dropped-draggable" style=" background-color:#5c67ff; color: white; ">
Servicepoint</a> <td class="kalender-cell" id="16_28.09.2021_Vormittag" title="Neuer Eintrag">
</td>
<td class="kalender-cell" id="16_28.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="16_29.09.2021_Vormittag" title="Neuer Eintrag">
<a id="165" title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element dropped-draggable" style=" ">
Ticket-Support</a>
</td>
<td class="kalender-cell" id="16_29.09.2021_Nachmittag" title="Neuer Eintrag" >
<a id="32" title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element dropped-draggable" style=" background-color:#ff0000; color: white; ">
Hotline</a> <td class="kalender-cell" id="16_30.09.2021_Vormittag" title="Neuer Eintrag">
</td>
<td class="kalender-cell" id="16_30.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="16_01.10.2021_Vormittag" title="Neuer Eintrag">
</td>
<td class="kalender-cell" id="16_01.10.2021_Nachmittag" title="Neuer Eintrag" >
<a id="33" title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element dropped-draggable" style=" background-color:#5c67ff; color: white; ">
Servicepoint</a>
</td>
</tr>
<tr >
<th id="sortable" scope="row">17</th>
<td class="kalender-cell" id="17_27.09.2021_Vormittag" title="Neuer Eintrag">
<a id="32" title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element dropped-draggable" style=" background-color:#ff0000; color: white; ">
Hotline</a>
</td>
<td class="kalender-cell" id="17_27.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="17_28.09.2021_Vormittag" title="Neuer Eintrag">
<a id="165" title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element dropped-draggable" style=" ">
Ticket-Support</a>
</td>
<td class="kalender-cell" id="17_28.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="17_29.09.2021_Vormittag" title="Neuer Eintrag">
</td>
<td class="kalender-cell" id="17_29.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="17_30.09.2021_Vormittag" title="Neuer Eintrag">
<a id="33" title="Details" data-toggle="modal" data-target="#terminModal" class="kalender-element dropped-draggable" style=" background-color:#5c67ff; color: white; ">
Servicepoint</a>
</td>
<td class="kalender-cell" id="17_30.09.2021_Nachmittag" title="Neuer Eintrag" > <td class="kalender-cell" id="17_01.10.2021_Vormittag" title="Neuer Eintrag">
</td>
<td class="kalender-cell" id="17_01.10.2021_Nachmittag" title="Neuer Eintrag" >
</td>
</tr>
</tbody>
</table>I managed to figure out a solution by adding a function:
function dragSetup(elem)
{
elem.draggable({
revert: "invalid",
connectToSortable: "#droppable"
});
}
Which I now call whenever I need to add this draggable widget to a div, like so:
$(function() {
dragSetup($(".dropped-draggable"));
$('.droppable td').droppable({
drop: function (event, ui) {
$(ui.helper).remove();
var cloned = $(ui.helper).clone();
$(this).append(cloned);
cloned.css({
"top": "",
"left": ""
});
cloned.removeClass("draggable");
cloned.addClass("dropped-draggable");
dragSetup(cloned);
}
})
});