我怎样才能让它只是一个空状态或ui-sortable show的drop target占位符？

Question

我有两个连接的ui可排序列表.当其中一个列表为空时,我需要显示一条消息; 当拖动时悬停该空列表时,我需要显示一个样式化的放置目标并隐藏空列表消息.我能够编写绝大多数代码,这里有一个简化的Codepen工作.

问题在于,当您从填充列表中拖动空列表然后再次移出时,空列表会显示空列表占位符和样式化放置目标.这是一个截屏:

问题的根源似乎在于我计算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,以及来自angular-ui的sortable.那里也有一些字体很棒.

Answer 1

我想我解决了问题。这是一个带有解决方案的代码笔。

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

以下是我在代码中编辑的行：

少文件：

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。