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

Question

I have two connected ui-sortable lists. When one of the lists is empty, I need to show a message; when that empty list is hovered while dragging, I need to show a styled drop target and hide the empty list message. I was able to program the vast majority of this code and here is a simplifed Codepen of it working.

The bug is that when you drag from the populated list over the empty list and then out again, the empty list shows both the empty list placeholder and the styled drop target. Here is a screen capture:

The root of the problem appears to be in way I calculate if the list is empty for the sortableList directive:

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;
  }
};

Note that I am keeping track of the state on the scope and using $apply to ensure the DOM updates like so:

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;
  });
}

Here is the html for the directives template:

<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>

The dependency list is quite long for the codepen to work, I simplified the code from actual production code and eliminating the dependencies would have made the custom code quite substantial. Here is a list of the dependencies if you want to try to get it running yourself: jquery, jquery-ui, angular, bootstrap, lodash, and sortable from angular-ui. There is some font-awesome in there as well.

Answer 1

I think I solved the problem. Here is a codepen with the solution.

Basically, the problem was that the dragout event was being (correctly) fired when your cursor dragged the item out of a sortable-list, but the placeholder would stay in the sortable-list until you dragged it into another sortable-list. So in that in between time, both the attachment-empty-state element and the placeholder would be shown in the sortable-list.

Here are the lines that I edited in the code:

Less file:

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);
  ...
}

If you don't like using jQuery to add and remove classes globally, you could use $rootScope.$broadcast("placeholderShown") and $rootScope.$on("placeholderShown",function() { // scope logic }. I figured a little jQuery is less complex, even though it isn't pure Angular.