动态创建的div是可拖动的但不可丢弃

Question

左侧边栏上的

，我有（硬编码）可拖动对象（li's - div）的“报告部分”列表和从某些数据库记录动态生成的“窗口小部件”列表（也是li的 - div）

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

小部件列表以硬编码元素（称为“警报”）开头，然后继续动态创建的元素（DISSATISFACTION DRIVERS *等等）

当我将第一个（硬编码）小部件“警报”拖动到一行时，删除工作正常，结果看起来像这样

当我尝试从列表中删除任何其他（动态创建的）窗口小部件时，拖动工作但删除不起作用。我很茫然！如果拖动对小部件起作用，那么问题应该在于droppable容器，而不是接受小部件。如果是这样，那么为什么droppable功能可以在容器中用于硬编码“Alerts”小部件（相同的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>

任何想法？