Ngx-drag-scroll: альтернатива для детей с отключенной прокруткой и перетаскиванием

Привет, @CrackerakiUA . Вы пробовали [drag-scroll-disabled]="disabled" ?

добавление кода ниже

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

и на детском месте:

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

также представляем bool, чтобы увидеть, меняется ли он. [drag-scroll-disabled] кажется, что он работает с начальным значением, и когда я меняю переменную, оно не меняется. Странно, потому что в вашем примере тумблер работает.

Поправьте меня если я ошибаюсь. По сути, вы хотите, чтобы drag-scroll-disabled отключил mouseenter и mouseleave для всех дочерних элементов в контейнере директивы.

это не похоже на все дочерние элементы, классной функцией было бы добавить атрибут к любому дочернему элементу, и для этого дочернего элемента прокрутка перетаскивания была бы отменена (в некотором роде работает stopPropagation). Если вы мне посоветуете, я буду рад реализовать эту функцию.

Теоретически, если я реализую вашу демонстрацию, она должна работать нормально, но в моем случае у меня есть масса элементов в этом контейнере, и отключение не работает.

У вас есть фрагмент кода, которым вы хотите поделиться? Или вы можете разветвить демонстрационное приложение и показать мне, что именно вы имеете в виду? Мне сложно представить себе вариант использования с чтением кода или демонстрации.

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

Пожалуйста, проверьте код, если это не проясняет идею, я сделаю демо.

Спасибо @CrackerakiUA , я понял. Я скоро выпущу версию 2.0.0, в которой будет введена drag-scroll-item для пометки всех дочерних элементов. Когда выйдет 2.0.0, я могу сразу добавить эту функцию.

Круто, ты знаешь, когда это будет, тебе нужна помощь?

PR для 2.0 повышен https://github.com/bfwg/ngx-drag-scroll/pull/145. Я просто провожу кучу тестов, чтобы убедиться, что нет регресса. Вот новый README https://github.com/bfwg/ngx-drag-scroll/blob/7592e3b08894ce23347c392c3fb88fc4c545323b/README.md

Было бы замечательно, если бы вы дали этому пиару опробовать, чтобы мы могли заставить его жить быстрее. Спасибо!

перетащить элемент прокрутки
выглядит так красиво, можно также использовать что-то вроде
игнорировать перетаскивание прокрутки элемент
представьте себе пример trello, где у вас есть столбцы, которые не перетаскивают фон.

Ага, я подумываю добавить drag-scroll-disabled" attribute in the drag-scroll-item`, чтобы отключить родительское приложение от перетаскивания и прокрутки. Что вы думаете?

Привет, есть ли в этом прогресс?

Он был на одной из моих рабочих веток, и я забыл об этом. Я внесу свои изменения и, надеюсь, получу их к сегодняшнему дню. Извините за это 😅

Звучит хорошо, спасибо

Изменение есть в 7.1.0. Вы можете добавить атрибут «отключено перетаскивание» на дочерний элемент, и он отключит перетаскивание этого элемента.

Решено в № 205

Привет, я тестировал 7.1.0 и он не работает :(
Мой пример:

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

В элементе задачи отсутствует атрибут 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>

сразу после того, как я добавил drag-scroll-item чтобы остановить перетаскивание. Пробовал добавленный вами случай, а также:

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

и следующий сценарий:

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

Это странно. Можете ли вы воспроизвести в демонстрационном приложении, потому что оно у меня работает нормально.

Я использовал ваш пример и сделал что-то вроде того, что не работает:

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

На самом деле drag-scroll-item выглядит не так, как предполагалось, контейнер drag-scroll имеет возможность перетаскивания.

@bfwg мой пример работает на вашей стороне?

@bfwg Чем и почему? с помощью блоков перетаскивания и прокрутки все элементы типа изображения с призрачным перетаскиванием на веб-сайте, я не могу найти, как это исправить

Эта проблема дублирована, пожалуйста, посмотрите мои комментарии https://github.com/bfwg/ngx-drag-scroll/issues/223#issuecomment -494259349

Я указал на проблему. @ arman2r