Как я могу сделать это только для пустого состояния или для целевого заполнителя для вывода ui-sortable show?

У меня есть два связанных ui-сортируемых списка. Когда один из списков пуст, мне нужно показать сообщение; когда этот пустой список зависает во время перетаскивания, мне нужно показать стилизованную цель выделения и скрыть сообщение пустого списка. Я смог запрограммировать подавляющее большинство этого кода и здесь упрощенный файл 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>

Список зависимостей довольно длинный для работы кодекса, я упростил код из фактического производственного кода и избавил от зависимостей, сделав собственный код весьма существенным. Ниже приведен список зависимостей, если вы хотите попытаться запустить его самостоятельно: jquery, jquery-ui, angular, bootstrap, lodash и сортировать из angular -ui. Там есть и некоторые шрифты.

Ответ 1

Думаю, я решил проблему. Вот codepen с решением.

В основном проблема заключалась в том, что событие 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") и $rootScope.$on("placeholderShown",function() { // scope logic }. Я понял, что немного jQuery менее сложно, хотя он не является чистым Angular.