两个带有 angular-ui/ui-sortable 的连接列表，在一个中禁用占位符，同时在另一个中启用它

Posted 2023-05-09

【中文标题】两个带有 angular-ui/ui-sortable 的连接列表，在一个中禁用占位符，同时在另一个中启用它

【英文标题】：two connected lists with angular-ui/ui-sortable, disable placeholder in one while enabling it in the other

【发布时间】：2016-02-20 12:20:35

【问题描述】：

在我的应用程序中有一个菜单，您可以在其中选择模板并将它们拖放到组件列表中。我正在为两个连接的列表使用 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); 
    
;

如何使源列表不显示占位符？ 我一直在尝试使源列表不可排序，但随后它也变得不可拖动。如果源列表是不可变的，并且当用户开始从菜单中拖动项目时会创建一个克隆，那将是最好的。

见codepen

【参考方案1】：

通过在css中添加以下内容来解决占位符可见问题：

.sourcelist .component-placeholder 
    display:none;

我将 codepen 原样保留是为了首先显示问题所在。