Ngx-drag-scroll: Предотвращение распространения щелчков сразу после перетаскивания

@Sprauch
Благодарим за сообщение об этой проблеме. Хотите сообщить об этой ошибке?

Нет, я еще слишком новичок в этом. Начала разработку на Angular менее 18 месяцев назад и вчера присоединилась к GitHub;)

Не беспокойтесь, я постараюсь исправить это, когда у меня будет время.

Привет, ребята, у меня тоже есть эта проблема, есть ли прогресс с исправлением / обходным решением?

Привет @ stuart-clark-45

Я работаю над выпуском версии 2.0, надеюсь, к тому времени эта проблема исчезнет. Если нет, я вернусь и исправлю.

@bfwg это большое спасибо, очень хорошая маленькая библиотека, кроме этой ошибки. У вас есть идеи, когда вы можете выпустить v2.0?

@ Стюарт-Кларк-45

Нет проблем, прогресс 2.0 можно отслеживать в # 66 # 68. После небольшого расследования проблему решить сложнее, чем я ожидал. Я постараюсь создать новый PR, чтобы исправить это сразу после релиза 2.0. Извините за задержку.

@bfwg Отлично, похоже, ты в порядке, спасибо большое: thumbsup:

Я не знаю, связано ли это, но я не могу выделить текст ни в одном из моих приложений angular с помощью мыши и выделения текста. Это происходит после импорта DragScrollModule. Я зашел на демонстрационную страницу, и проверил, что выделение текста также не работает на этой странице.

Единственный способ выделить текст прямо сейчас в любом месте страницы - это использовать двойной щелчок мышью и клавиатуру для выделения текста ...

Есть ли что-нибудь, что можно сделать временно, чтобы изменить это поведение?

Я решил это, используя (sizesLeftBound), чтобы выяснить, перетаскивается ли он, чтобы предотвратить щелчок.
Добавьте (sizesLeftBound) в ваш dragScroll
<div dragScroll [scrollbar-hidden]="true" (reachesLeftBound)="leftBoundStat($event)">
Добавьте события мыши в свой div и т. Д.
<div (mousedown)="down()" (click)="fire()">
В вашем component.ts добавьте следующее

click = false;
leftBoundStat(event: any): void {
        if (this.click) {
            this.click = false;
        }
    }

    down() {
        console.log('Mouse down');
        window.setTimeout(this.startCheck(), 1000);
    }

    fire() {
        if (this.click) {
            console.log('Fire the action');

        }
    }
startCheck() {
        this.click = true;
    }

Это предотвратит щелчок, если он должен был перетаскиваться.
КСТАТИ, скрытая полоса прокрутки у меня все еще не работает. Если кто-нибудь знает, как заставить его работать, я был бы признателен за строчку :)

Привет, @STIKO , можешь дать мне ссылку на плункер, чтобы я мог рассмотреть ее поближе?

Я не мог заставить его работать в плункере, так как никогда не использовал его раньше.
Я импортировал его в app.module.ts
import {DragScrollModule} from 'ngx-drag-scroll';
Затем я добавил его в @NgModule импорт того же файла
imports: [DragScrollModule];
Я предполагаю, что вышеизложенное верно, поскольку перетаскивание работает.
Теперь в моем компоненте

export class Example implements OnInit {
   @Input() 'scrollbar-hidden': boolean;
}

Не уверен, нужен ли @Input() . наконец шаблон

<div dragScroll scrollbar-hidden="true"
         drag-scroll="true"
         drag-scroll-y-disabled="true"
         snap-disabled="true">

          <div style="display: inline">
            <img src='http://via.placeholder.com/310x471'/>
          </div>
          <div style="display: inline">
            <img src='http://via.placeholder.com/310x471'/>
          </div>
          <div style="display: inline">
            <img src='http://via.placeholder.com/310x471'/>
          </div>
      </div>
</div>

Все работает нормально, за исключением случаев, когда я прокручиваю полосу прокрутки, хотя я установил для параметра disable значение true

Можете ли вы попробовать удалить оболочку div для тега img и указать им ширину и высоту?
Что-то вроде ниже. Посмотрите, решит ли это проблему для вас.

@Component({
  selector: 'my-app',
  styles: [`
    .image-cell: {
      width: 310px;
      height: 470px;
    }
  `]
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <div dragScroll 
         drag-scroll-y-disabled="true"
         scrollbar-hidden="true"
         snap-disabled="true" style="height: 470px; width: 310px;">
          <img class="image-cell" src='http://via.placeholder.com/310x471'/>
          <img class="image-cell" src='http://via.placeholder.com/310x471'/>
          <img class="image-cell" src='http://via.placeholder.com/310x471'/>
      </div>
    </div>
  `,
})