jQuery-UI：放弃并克隆 div 预先存在的可拖动小部件

Question

我在 table（.draggable）外有 divs，在 table（.dropped-draggable）内有 divs，它们都是可拖动的，但行为略有不同。当我将 .draggable 拖放到 table 中时，我克隆了助手，将其附加到 div 并赋予它 .dropped-draggable class。然而，为了使这个可拖动，我似乎需要用它的所有数据重新初始化 draggable()。

有什么方法可以告诉 div 使用已经存在的可拖动数据（在本例中为 .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>

Answer 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：放弃并克隆 div 预先存在的可拖动小部件

jQuery-UI: Give Dropped & Cloned div pre-existing draggable widget

jquery

jquery-ui-draggable

jquery-ui-droppable