Ngx-drag-scroll: alternativa de arrastrar-desplazarse-discapacitados para niños

Hola, @CrackerakiUA . ¿Has probado [drag-scroll-disabled]="disabled" ?

agregando el siguiente código

 dragScroll drag-scroll-y-disabled='true' snap-disabled='true' [drag-scroll-disabled]="bool"

y en el lugar del niño:

 (mouseenter)="bool=true" (mouseleave)="bool=false"

también presentando bool para ver si está cambiando. [drag-scroll-disabled] parece que funciona en el valor inicial y cuando cambio la variable, no cambia. Extraño porque en tu ejemplo, alternar está funcionando.

Corrígeme si estoy equivocado. Básicamente, desea que drag-scroll-disabled deshabilite mouseenter y mouseleave para todos los elementos secundarios en el contenedor de directivas.

no es como para todos los elementos secundarios, una característica interesante sería agregar un atributo a cualquier niño y para ese niño se cancelaría el desplazamiento de arrastre (de alguna manera funciona stopPropagation). Me complace implementar esa función, si me guían.

Teóricamente, si implemento su demostración, debería funcionar bien, pero en mi caso, tengo toneladas de elementos en ese contenedor y la desactivación no funciona bien.

¿Tiene un fragmento de código para compartir? ¿O puede bifurcar la aplicación de demostración y mostrarme qué quiere decir exactamente? Me cuesta imaginarme el caso de uso al leer el código o la demostración.

<div class="container" dragScroll drag-scroll-y-disabled="true" snap-disabled="true">
    <header title="This should drag background">Something is here</header>
    <div drag-scroll-disable title="No drag background">Content</div>
    <div drag-scroll-disable title="No drag background">Content</div>
    <div drag-scroll-disable title="No drag background">Content</div>
    <div drag-scroll-disable title="No drag background">Content</div>
    <div drag-scroll-disable title="No drag background">Content</div>
    <footer title="This should drag background">Something else</footer>
    <!-- everything else should also drag background -->
</div>

Por favor revise el código, si eso no aclara la idea, haré una demostración.

Gracias @CrackerakiUA , se me ocurrió la idea. Pronto sacaré la versión 2.0.0, que introducirá un drag-scroll-item para marcar todos los elementos secundarios. Una vez que 2.0.0 esté disponible, puedo agregar esta función inmediatamente después.

Genial, ¿sabes cuándo será? ¿Necesitas ayuda con eso?

El PR para 2.0 subió https://github.com/bfwg/ngx-drag-scroll/pull/145. Solo estoy haciendo un montón de pruebas para asegurarme de que no haya regresión. Aquí está el nuevo README https://github.com/bfwg/ngx-drag-scroll/blob/7592e3b08894ce23347c392c3fb88fc4c545323b/README.md

Sería genial si pudieras darle una oportunidad a ese PR para que podamos hacerlo funcionar más rápido. ¡Gracias!

arrastrar-desplazar-elemento
se ve tan bien, también es posible usar algo como
ignorar-arrastrar-desplazamiento-elemento
imagina un ejemplo como trello donde tienes columnas que no arrastran el fondo.

Sí, estoy pensando en agregar un drag-scroll-disabled" attribute in the drag-scroll-item` para deshabilitar el arrastre y el desplazamiento de la aplicación principal. ¿Qué piensas?

Hola, ¿algún progreso en esto?

Estaba en una de mis ramas de trabajo y lo olvidé. Impulsaré mis cambios y, con suerte, lo conseguiré hoy. Perdón por eso 😅

Suena bien, gracias

El cambio está en 7.1.0. Puede agregar un atributo 'arrastrar-deshabilitado' en el elemento hijo, y deshabilitará el arrastre en ese elemento.

Resuelto en # 205

Oye, he probado 7.1.0 y no funciona :(
Mi ejemplo:

<drag-scroll [drag-scroll-y-disabled]="true">
    <task drag-disabled></task>
    <task drag-disabled></task>
    <task drag-disabled></task>
    <task drag-disabled></task>
    <task drag-disabled></task>
    <task drag-disabled></task>
</drag-scroll>

A su elemento de tarea le falta el atributo drag-scroll-item .

 <drag-scroll [drag-scroll-y-disabled]="true">
    <task drag-scroll-item drag-disabled></task>
    <task drag-scroll-item drag-disabled></task>
    <task drag-scroll-item drag-disabled></task>
    <task drag-scroll-item drag-disabled></task>
    <task drag-scroll-item drag-disabled></task>
    <task drag-scroll-item drag-disabled></task>
</drag-scroll>

justo después de agregar drag-scroll-item arrastrar-desplazar y detener el trabajo. Probé el caso que agregaste y también:

 <drag-scroll [drag-scroll-y-disabled]="true" drag-scroll-item>
    <task drag-disabled></task>
    <task drag-disabled></task>
    <task drag-disabled></task>
    <task drag-disabled></task>
    <task drag-disabled></task>
    <task drag-disabled></task>
</drag-scroll>

y el siguiente escenario:

<drag-scroll [drag-scroll-y-disabled]="true">
    <ng-container drag-scroll-item>
        <task drag-disabled></task>
        <task drag-disabled></task>
        <task drag-disabled></task>
        <task drag-disabled></task>
        <task drag-disabled></task>
        <task drag-disabled></task>
    </ng-container>
</drag-scroll>

Eso es extraño. ¿Puedes reproducirlo en la aplicación de demostración porque funciona bien para mí?

Usé su ejemplo e hice algo como a continuación que no funciona:

<drag-scroll class="demo-one"
  drag-scroll-y-disabled="true"
  scrollbar-hidden="true"
  (dsInitialized)="onDragScrollInitialized()"
  (indexChanged)="onIndexChanged($event)"
  (reachesLeftBound)="leftBoundStat($event)"
  (reachesRightBound)="rightBoundStat($event)"
  (snapAnimationFinished)="onSnapAnimationFinished()"
  #nav
  >
  <ng-container *ngFor="let image of imagelist; let i = index;" drag-scroll-item>
    <img *ngIf="i%2==0" [src]="'assets/img/' + image" (click)="clickItem(image)" title="{{i}}" drag-disabled/>
    <img *ngIf="i%2!=0" [src]="'assets/img/' + image" (click)="clickItem(image)" title="{{i}}"/>
  </ng-container>

</drag-scroll>

De hecho, drag-scroll-item parece no funcionar como debería, el contenedor drag-scroll tiene la capacidad de arrastrarse.

@bfwg, ¿mi ejemplo funciona de tu lado?

@bfwg ¿Con qué o por qué? usando bloques de arrastrar y desplazar todos los elementos de tipo de imagen de arrastre fantasma en el sitio web, no puedo encontrar cómo solucionar esto

Este problema es un duplicado, consulte mis comentarios https://github.com/bfwg/ngx-drag-scroll/issues/223#issuecomment -494259349

He señalado el problema. @ arman2r