我怎样才能让它成为空状态或 ui-sortable show 的放置目标占位符？

Question

我有两个相连的 ui 可排序列表。当其中一个列表为空时，我需要显示一条消息；当拖动时悬停该空列表时，我需要显示样式化的放置目标并隐藏空列表消息。我能够编写此代码的绝大部分并且 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>

依赖列表是 quite 代码笔的工作，我从实际生产代码中简化了代码，消除依赖关系会使自定义代码 quite 变得很重要。如果您想自己尝试获取它运行，这里是依赖项列表：jquery、jquery-ui、angular、bootstrap、lodash，并可从 angular-ui 排序。那里也有一些很棒的字体。

Answer 1

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

基本上，问题是当您的光标将项目拖出可排序列表时（正确地）触发了 dragout 事件，但占位符将保留在可排序列表中，直到您将其拖到另一个可排序列表中-列表。因此，在此期间，attachment-empty-state 元素和占位符都将显示在可排序列表中。

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

少文件：

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.

我怎样才能让它成为空状态或 ui-sortable show 的放置目标占位符？

How can I make it so only an empty state or a drop target placeholder of ui-sortable show?

drag-and-drop

angularjs

angular-ui

angular-ui-sortable