ng-drag-drop无法删除到所需的div

Question

我正在角度4应用程序中尝试ng-drap-drop plugin https://www.npmjs.com/package/ng-drag-drop。

HTML代码

<div class="zydf-cContent zydf-cContent-custom zydf-list">
       <ul class="zydf-prop connectedSortable zydf-devFieldsDraggable" id="zydf-devLeftDragList">
    <li class="zydf-prop-item " draggable>
            <a data-fielddefinitionid="" data-sectiondefinitionid="" class="zydf-l zydf-dfLoadProperties "> <span class="zydf-icon zydf-text zydf-default"></span>Purchase Type<span class='close' style="display:none;">x</span></a>
        </li>
        <li class="zydf-prop-item "  draggable>
            <a data-fielddefinitionid="" data-sectiondefinitionid="" class="zydf-l zydf-dfLoadProperties " > <span class="zydf-icon zydf-text zydf-default"></span>Cost Center<span class='close' style="display:none;">x</span></a>
        </li>
        <li class="zydf-prop-item "  draggable>
            <a data-fielddefinitionid="" data-sectiondefinitionid="" class="zydf-l zydf-dfLoadProperties " > <span class="zydf-icon zydf-text zydf-default"></span>Category<span class='close' style="display:none;">x</span></a>
        </li>
        <li class="zydf-prop-item "  draggable>
            <a data-fielddefinitionid="" data-sectiondefinitionid="" class="zydf-l zydf-dfLoadProperties " > <span class="zydf-icon zydf-text zydf-default"></span >Field 1<span class='close' style="display:none;">x</span></a>
        </li>
        <li class="zydf-prop-item " draggable>
            <a data-fielddefinitionid="" data-sectiondefinitionid="" class="zydf-l zydf-dfLoadProperties " > <span class="zydf-icon zydf-text zydf-default"></span>Field 2<span class='close' style="display:none;">x</span></a>
        </li>
        <li class="zydf-prop-item " draggable>
            <a data-fielddefinitionid="" data-sectiondefinitionid="" class="zydf-l zydf-dfLoadProperties " > <span class="zydf-icon zydf-text zydf-default"></span>Field 3<span class='close' style="display:none;">x</span></a>
        </li>
        <li draggable class="zydf-prop-item " draggable>
            <a data-fielddefinitionid="" data-sectiondefinitionid="" class="zydf-l zydf-dfLoadProperties " > <span class="zydf-icon zydf-text zydf-default"></span>Field 4<span class='close' style="display:none;">x</span></a>
        </li>

    </ul>
    </div>
    <div class="zydf-dragHlpTxt" droppable>
        <div class="bld sub-heading note" align="left">
            Controlling Fields
        </div>
             <span class="zydf-noteOnUniqueCheckCF" style="display: none; color: red;"><?php echo lang('LBL_CONTROLLING_FIELD_CANNOT_BE_EMPTY')?><div>&nbsp;</div></span>
        <span class="zydf-noteOnUniqueCheckCFOne" style="display: none; color: red;"><?php echo lang('LBL_CONTROLLING_FIELD_ATLEASTONE')?></span>
        <ul class="clear clearfix table-eform zydf-form " id="controllingFieldDiv">
            <li class="drag_drop ddCF" >
                Drag and Drop
            </li>
        </ul>
    </div>

app.module.ts

import { NgDragDropModule } from 'ng-drag-drop';
 imports: [
    NgDragDropModule.forRoot()
  ],

我能够拖动必填字段，但无法将它们拖放到提到的可拖动的div中。我错过了什么吗？