兩個帶有angular-ui / ui-sortable的已連接列表，其中一個禁用占位符，而另一個啟用

Question

在我的應用程序中，有一個菜單，您可以在其中選擇模板並將其拖放到組件列表中。 我正在為兩個連接的列表使用angular-ui ui-sortable。

我正在使用自定義占位符。 不幸的是，它也在源列表中可見。

將該項目放入目標列表后，將觸發源列表停止事件並添加一些屬性。 這是后端實際在數據庫中創建項目的地方。

ctrl.sortableSrcOptions = {
    placeholder: {
        element: function (currentItem) {
            return $("<div class='component-placeholder'>Place here</div>")[0];
        },
        update: function (container, p) {
            return;
        }
    },
    connectWith: ".componentlist",
    stop: function (e, ui) {
        if (ui.item.sortable.droptarget.hasClass('componentlist')) {
            //add all properties required by items in destination list
        }
    }

};

當目標列表收到該項目時，將還原源列表。

ctrl.sortableDestOptions = {
    receive: function (e, ui) {
        //restore original menu
        ctrl.src = angular.copy(ctrl.originalSrc); 
    }
};

如何使源列表不顯示占位符？ 我一直在嘗試使源列表不可排序，但隨后它也變得不可拖動。 如果源列表是不可變的，並且當用戶開始從菜單中拖動項目時將創建一個克隆，那將是最好的。

參見密碼筆

Answer 1

通過將以下內容添加到css中，可以解決占位符可見的問題：

.sourcelist .component-placeholder {
    display:none;
}

我直接離開了Codepen，以首先顯示問題所在。