我有两个连接的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>
依赖列表对于代码工作来说是相当长的，我简化了实际生产代码中的代码，并消除了依赖关系将使定制代码相当可观。如果你想尝试让它自己运行，这里是一个依赖关系的列表：jquery，jquery-ui，angular，bootstrap，lodash，并且可以从angular-ui进行排序。在那里也有一些字体。
我想我解决了这个问题。这是一个
codepen with the solution。
基本上，问题是当您的游标将项目从可排序列表中拖出时，dragout事件被正确地触发，但占位符将保留在可排序列表中，直到将其拖动到另一个可排序列表中。所以在两个时间之间，attach-empty-state元素和占位符都将显示在sortable-list中。
以下是我在代码中编辑的行：
少文件：
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不太复杂，即使它不是纯粹的角度。
