17

我有两个连接的 ui-sortable 列表。当其中一个列表为空时，我需要显示一条消息；当该空列表在拖动时悬停时，我需要显示一个样式化的放置目标并隐藏空列表消息。我能够编写绝大多数代码，这是一个简化的 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 和 sortable from angular-ui。那里也有一些很棒的字体。

4

1 回答 1

4

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

基本上，问题是当您的光标将项目拖出可排序列表时，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")and $rootScope.$on("placeholderShown",function() { // scope logic }。我认为一点 jQuery 不那么复杂，即使它不是纯 Angular。

于 2015-08-12T07:19:02.277 回答