如何使用 jquery ui 使拖动和克隆的元素再次可拖动？

Posted 2023-05-08

【中文标题】如何使用 jquery ui 使拖动和克隆的元素再次可拖动？

【英文标题】：how to make dragged and cloned element draggable again using jquery ui?

【发布时间】：2018-09-16 17:48:27

【问题描述】：

我正在使用 Jquery UI 并创建拖放功能。我有可以拖动和克隆的 div 元素，然后将拖动和克隆的元素附加到由可放置 id 指定的另一个 div 元素。它工作正常。当我想要拖动元素时遇到问题，这些元素已被拖动、克隆并附加到可放置 div .

代码如下：

<div>
    <img id="droppable" class="ui-widget-header"  src=""> 
</div>  

<div class="row" id="element">
    <div  class="portlet ui-widget-content draggable" >
      <div class="panel-heading">
           <h3 class="panel-title">element1</h3>
      </div>
    </div>
    <div  class="portlet ui-widget-content draggable" >
        <div class="panel-heading">
           <h3 class="panel-title">element2</h3>
        </div>
    </div>
</div>

这里是js代码：

$(function()
    $('.draggable').draggable( 
        helper : "clone"
     );
   $('#droppable').droppable(
       accept      : ".draggable",
       drop        : function()
      
         var dropedItem = $(ui.draggable).clone();
         $(this).append($(ui.helper).clone());
      
  );  );

【参考方案1】：

查看您的代码并运行它，我发现使用的 ui 未声明，导致执行删除操作时出现错误。只需在执行 drop 时传递 ui 引用即可解决问题。

 $('#droppable').droppable(
       accept      : ".draggable",
       drop        : function(event, ui)
      
         var dropedItem = $(ui.draggable).clone();
         $(this).append($(ui.helper).clone());
      
  );

查看工作演示here。