jQuery-UI：给 Dropped & Cloned div 预先存在的可拖动小部件
Posted
技术标签:
【中文标题】jQuery-UI：给 Dropped & Cloned div 预先存在的可拖动小部件【英文标题】：jQuery-UI: Give Dropped & Cloned div pre-existing draggable widget 【发布时间】：2021-11-22 03:38:57 【问题描述】：我有一个表格外的 div (.draggable) 和一个表格内的 div (.dropped-draggable)，它们都是可拖动的，但行为略有不同。当我将 .draggable 放入表中时，我克隆了帮助程序，将其附加到 div 并为其提供 .dropped-draggable 类。但是，为了使这个可拖动，似乎我需要用它的所有数据重新初始化 draggable()。
有没有办法告诉 div 使用已经存在的可拖动数据（在本例中为 .dropped-draggable 类）？
$(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>【问题讨论】：
【参考方案1】：我设法通过添加一个函数找到了解决方案：
function dragSetup(elem)
elem.draggable(
revert: "invalid",
connectToSortable: "#droppable"
);
每当我需要将此可拖动小部件添加到 div 时，我现在都会调用它，如下所示：
$(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);
)
);
【讨论】：
以上是关于jQuery-UI：给 Dropped & Cloned div 预先存在的可拖动小部件的主要内容，如果未能解决你的问题，请参考以下文章
当usbnet打印 kevent * may have been dropped（转）
ntp 服务：Server dropped: Strata too high
ORA-15028: ASM file '..' not dropped; currently being accessed --转载