angularjs - initialize - ¿Cómo puedo hacer que sea solo un estado vacío o un marcador de posición de destino de caída de ui-sortable show?

jquery ui sortable container

Question

Tengo dos listas conectables de ui conectadas. Cuando una de las listas está vacía, necesito mostrar un mensaje; cuando la lista vacía se desplaza mientras se arrastra, debo mostrar un destino para soltar con estilo y ocultar el mensaje de la lista vacía. Pude programar la gran mayoría de este código y aquí hay un Codepen simplificado que funciona.

El error es que cuando arrastra desde la lista rellenada sobre la lista vacía y luego vuelve a salir, la lista vacía muestra tanto el marcador de posición de la lista vacía como el destino de colocación con estilo. Aquí hay una captura de pantalla:

La raíz del problema parece estar en la forma en que calculo si la lista está vacía para la directiva 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;
  }
};

Tenga en cuenta que estoy siguiendo el estado del alcance y usando $ apply para asegurar que el DOM se actualice así:

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

Aquí está el html para la plantilla de directivas:

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

La lista de dependencias es bastante larga para que funcione el código de código, simplifiqué el código del código de producción real y eliminando las dependencias habría hecho que el código personalizado fuera bastante importante. Aquí hay una lista de las dependencias si desea intentar ejecutarla usted mismo: jquery, jquery-ui, angular, bootstrap, lodash y clasificable desde angular-ui. Hay un poco de fuente impresionante allí también.

Answer 1

Creo que resolví el problema. Aquí hay un codepen con la solución .

Básicamente, el problema era que el evento de arrastre estaba siendo activado (correctamente) cuando el cursor arrastró el elemento fuera de una lista clasificable, pero el marcador de posición permanecería en la lista ordenable hasta que lo arrastrara a otra lista clasificable. Por lo tanto, entre tanto, tanto el elemento adjunto-vacío-estado como el marcador de posición se mostrarán en la lista clasificable.

Aquí están las líneas que edité en el código:

Menos archivo:

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

Si no le gusta usar jQuery para agregar y eliminar clases globalmente, podría usar $rootScope.$broadcast("placeholderShown") y $rootScope.$on("placeholderShown",function() { // scope logic } . I Pensé que un poco de jQuery es menos complejo, aunque no es Angular puro.