我怎样才能使它只有一个空状态或 ui-sortable 显示的放置目标占位符？

Posted 2023-05-08

【中文标题】我怎样才能使它只有一个空状态或 ui-sortable 显示的放置目标占位符？

【英文标题】：How can I make it so only an empty state or a drop target placeholder of ui-sortable show?

【发布时间】：2015-10-26 06:58:09

【问题描述】：

我有两个连接的 ui-sortable 列表。当其中一个列表为空时，我需要显示一条消息；当该空列表在拖动时悬停时，我需要显示一个样式化的放置目标并隐藏空列表消息。我能够编写大部分代码和here is a simplifed Codepen of it working.

错误在于，当您从填充列表拖动到空列表上然后再次拉出时，空列表会同时显示空列表占位符和样式放置目标。这是一个屏幕截图：

问题的根源似乎在于我计算 sortableList 指令的列表是否为空：

scope.isEmpty = function() 
  if (!scope.attachments) 
    return true;
   else if (scope.dragDirection === 'drag-out' && !scope.hovered)              
    return scope.attachments.length <= 1;
   else if (scope.hovered) 
    return false;
   else 
    return scope.attachments.length === 0;
  
;

请注意，我正在跟踪范围内的状态并使用 $apply 来确保 DOM 更新如下：

function onDragStart() 
  scope.$apply(function() 
    scope.dragDirection = 'drag-out';
  );


function onDragStop() 
   scope.$apply(function() 
    scope.dragDirection = '';
  );


function onDragOver() 
  scope.$apply(function() 
    scope.hovered = true;
  );


function onDragOut() 
  scope.$apply(function() 
    scope.hovered = false;
  );

这是指令模板的 html：

<div class="drop-target" ui-sortable="sortOptions" ng-model="attachments">
    <div ng-repeat="attachment in attachments" class="attachment-box">
        <span class="fa fa-bars pull-left drag-handle"></span>
        <div class="link-attachment">
            <a href ng-href=" attachment.fileUrl " target="_blank" class="attachment-name"> attachment.name </a>
            <div class="extra-info link-info"> attachment.fileType </div>
        </div>
    </div>
    <attachment-empty-state ng-show="isEmpty()"></attachment-empty-state>
</div>

对于 codepen 的工作来说，依赖项列表很长，我从实际生产代码中简化了代码，消除依赖项会使自定义代码变得相当可观。如果您想尝试自己运行它，这里有一个依赖项列表：jquery、jquery-ui、angular、bootstrap、lodash 和 sortable from angular-ui。里面也有一些很棒的字体。

【问题讨论】：

当您从容器中拖出最后一个项目时，您希望发生什么？

接近它当前在 codepen 中的工作方式 - 但最后一项药物显示与第一个药物相同的行为。它显示“空列表消息”和占位符.它应该显示拖动占位符，直到拖动助手完全离开列表，然后它应该切换到“空列表消息”。

【参考方案1】：

我想我解决了这个问题。这是codepen with the solution。

基本上，问题在于当您的光标将项目拖出可排序列表时，dragout 事件被（正确）触发，但占位符将保留在可排序列表中，直到您将其拖入另一个可排序列表.因此，在这期间，附件空状态元素和占位符都将显示在可排序列表中。

这是我在代码中编辑的行：

更少的文件：

attachment-empty-state 
  ...
  // hide empty state when the placeholder is in this list
  .placeholderShown & 
    display:none;
  

JS：

//Inside sortable-list
// Helper function
function setPlaceholderShownClass(element) 
  $(".drop-target").removeClass("placeholderShown");
  $(element).addClass("placeholderShown");


...

function onPlaceholderUpdate(container, placeholder) 
  setPlaceholderShownClass(container.element.context);
  ...

如果您不喜欢使用 jQuery 全局添加和删除类，您可以使用 $rootScope.$broadcast("placeholderShown") 和 $rootScope.$on("placeholderShown",function() // scope logic 。我认为一点 jQuery 不那么复杂，即使它不是纯 Angular。