li用图标删除并将ul添加到li

Question

我有诸如拖放之类的要求。

这是它工作时的样子：

• 拖放之前：

• 拖放后：

当在“键”，“组”和“值”中添加“ li”时，如何删除它们。

然后，在 Values （值）中显示 AVG ，在单击时它应显示为打开状态，如下拉菜单“ 平均，总和，计数，最大值 >“

HTML：

 <div class="col">

          <div class="card scrollbar-inner">
            <div class="card-body">
                <label>KPI's</label>
               <ul id="sortable1" class="connectedSortable">
                  <li class="ui-state-highlight li-disable" 
                    style="">Table 1</li>
                  <li class="ui-state-highlight">Item 1  </li>
                  <li class="ui-state-highlight">Item 2  </li>
                  <li class="ui-state-highlight">Item 3  </li>
                  <li class="ui-state-highlight">Item 4  </li>
                  <li class="ui-state-highlight li-disable" 
                    style="">Table 2</li>
                  <li class="ui-state-highlight">Item 1</li>
                  <li class="ui-state-highlight">Item 2</li>
                  <li class="ui-state-highlight">Item 3</li>
                  <li class="ui-state-highlight">Item 4</li>
                </ul>
            </div>
          </div>
        </div>

        <div class="col">

          <div class="card scrollbar-inner">
            <div class="card-body">
                    <label>Keys</label>
                <ul id="sortable2" class="connectedSortable">

                </ul>
            </div>
          </div>
        </div>

        <div class="col">
          <div class="card scrollbar-inner">
            <div class="card-body">
            <label>Groups</label>

                <ul id="sortable3" class="connectedSortable">
                </ul>

            </div>
          </div>
        </div>

        <div class="col" >
          <div class="card scrollbar-inner">
            <div class="card-body">
            <label>Values</label>

                <ul id="sortable4" class="connectedSortable">

                </ul>
            </div>
          </div>
        </div>

JS：

 $( function() {
    $( "#sortable1, #sortable2, #sortable3, #sortable4" ).sortable({
      connectWith: ".connectedSortable"

    }).disableSelection();

    $( "#sortable2,#sortable3" ).sortable({
      connectWith: ".connectedSortable",
   receive: function( event, ui ) {
        alert('add remove btn');
        $(this).closest('li').addClass('fa fa-remove');
    }
    });

    $( "#sortable4" ).sortable({
      connectWith: ".connectedSortable",
   receive: function( event, ui ) {
        alert('add drop-downs.');
    }
    })
});

我的代码可以很好地拖放，我正在使用 jQuery ui（v'1.12.1）。

请让我知道如何删除 li 和添加选项值面板。