Javascript 动态创建的div可以拖动，但不能拖放

在左侧栏上，我有一个（硬编码的）可拖动对象（li的-div）的“Report Sections”列表和一个从一些数据库记录动态生成的“widget”（也称为li的-div）列表

我通过从reports部分元素拖动并将它们拖放（克隆）到容器中，动态创建了许多行（div）

小部件列表以硬编码元素（称为“警报”）开始，然后以动态创建的元素（不满意驱动程序*，等等）继续

当我将第一个（硬编码的）小部件“警报”拖到一行中时，拖放工作正常，结果如下所示

当我尝试从列表中删除任何其他（动态创建的）小部件时，拖动可以工作，但删除不起作用。我不知所措！如果拖动在小部件上起作用，那么问题应该出在可拖放容器上，而不是接受小部件。如果是这样，那么为什么可拖放功能在硬编码的“警报”小部件（相同的div类，相同的所有内容）的容器中工作，而不是在动态创建的小部件中工作？检查页面元素，特别是小部件列表，所有条目看起来都一样（除了说明）

硬编码“警报：”的代码：

拖曳
警报
警觉的！
<div class="box box-element ui-draggable">      
    <a class="remove label label-danger" href="#close">
    <i class="glyphicon glyphicon-remove"></i> remove</a>
    <span class="drag label label-default ui-draggable-handle">
    <i class="glyphicon glyphicon-move"></i> drag</span>
    <div class="preview">Alerts</div>
    <div class="view">
        <div contenteditable="true" class="alert alert-success alert-dismissable">
            <h4>Alert!</h4>
        </div>
    </div
</div>

<div class="box box-element ui-draggable">
    <a class="remove label label-danger" href="#close">
    <i class="glyphicon glyphicon-remove"></i> remove</a>
    <span class="drag label label-default ui-draggable-handle">
    <i class="glyphicon glyphicon-move"></i> drag</span>
    <div class="preview">DISSATISFACTION DRIVERS*</div>
    <div class="view">
        <div contenteditable="true" class="alert alert-success alert-dismissable">
            <strong>Widget!</strong> Widget Name.
        </div>
    </div>
</div>