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

【问题标题】：how to make dragged and cloned element draggable again using jquery ui?如何使用 jquery ui 使拖动和克隆的元素再次可拖动？
【发布时间】：2018-09-16 17:48:27
【问题描述】：

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

代码如下：

<div>
    <img id="droppable" class="ui-widget-header" alt="64x64" 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());
      }
  });  });

【问题讨论】：

标签： jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

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

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

查看工作演示here。

【讨论】：