如何才能使ui-sortable只有一个空状态或一个拖放目标占位符？
我有两个连接的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和sortable from angular-ui。这里面也有一些很棒的字体。
回答 1
Stack Overflow用户
发布于 2015-08-12 15:19:02
我想我解决了这个问题。这是一个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没有那么复杂，即使它不是纯角度的。
https://stackoverflow.com/questions/31799663
复制相似问题