Ngx-drag-scroll: Cegah propagasi klik segera setelah seret dan lepas

@Sprauch
Terima kasih telah melaporkan masalah ini, apakah Anda ingin membuat PR untuk bug ini?

Nah, saya masih agak terlalu baru dalam hal ini. Mulai berkembang di Angular kurang dari 18 bulan yang lalu dan bergabung dengan GitHub kemarin ;)

Jangan khawatir, saya akan mencoba memperbaikinya ketika saya punya waktu.

Hai teman-teman, saya juga memiliki masalah ini, apakah ada kemajuan dengan perbaikan/penyelesaian?

Hai @stuart-clark-45

Saya sedang mengerjakan rilis untuk v2.0, semoga masalah ini akan hilang saat itu. Jika tidak, saya akan kembali dan memperbaikinya.

@bfwg itu bagus, terima kasih banyak, perpustakaan kecil yang sangat bagus selain bug ini. Apakah Anda memiliki ide kapan Anda akan merilis v2.0?

@stuart-clark-45

Tidak masalah, kemajuan 2.0 dapat dilacak di #66 #68 . Setelah sedikit penyelidikan, masalah ini lebih sulit untuk diperbaiki daripada yang saya harapkan. Saya akan mencoba membuat PR baru untuk memperbaikinya tepat setelah rilis 2.0. Maaf atas keterlambatannya.

@bfwg Luar biasa sepertinya Anda baik-baik saja, terima kasih banyak :thumbsup:

Saya tidak tahu apakah ini terkait, tetapi saya tidak dapat memilih teks di salah satu aplikasi sudut saya menggunakan mouse-down dan menyorot teks. Ini terjadi setelah mengimpor DragScrollModule. Saya pergi ke halaman demo dan pemilihan teks terverifikasi juga tidak berfungsi di halaman itu sama sekali.

Satu-satunya cara untuk memilih teks sekarang, di mana saja di halaman, adalah dengan menggunakan klik dua kali mouse dan keyboard untuk menyorot teks...

Apakah ada sesuatu yang dapat dilakukan sementara untuk mengesampingkan perilaku ini?

Saya memecahkan ini dengan menggunakan (reachesLeftBound) untuk mencari tahu apakah itu diseret untuk mencegah klik.
Tambahkan (mencapaiLeftBound) ke dragScroll Anda
<div dragScroll [scrollbar-hidden]="true" (reachesLeftBound)="leftBoundStat($event)">
Tambahkan acara mouse ke div Anda, dll.
<div (mousedown)="down()" (click)="fire()">
Di component.ts Anda tambahkan yang berikut:

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

Ini akan mencegah klik jika itu dimaksudkan untuk diseret.
Omong-omong, scrollbar-hidden masih tidak berfungsi untuk saya. Jika ada yang tahu cara membuatnya bekerja, saya akan menghargai satu baris :)

Hai @STIKO , bisa kasih saya link plunkernya supaya saya bisa lihat lebih dekat?

Saya tidak bisa membuatnya bekerja di plunker karena saya tidak pernah menggunakannya sebelumnya.
Saya mengimpornya di app.module.ts
import {DragScrollModule} from 'ngx-drag-scroll';
Kemudian saya menambahkannya ke impor @NgModule dari file yang sama
imports: [DragScrollModule];
Saya berasumsi hal di atas benar karena drag berfungsi.
Sekarang di komponen saya

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

Tidak yakin apakah @Input() diperlukan. akhirnya templatenya

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

Semuanya berfungsi dengan baik kecuali ketika saya menggulir, bilah gulir masih muncul meskipun saya telah mengatur menonaktifkan ke true

Bisakah Anda mencoba menghapus pembungkus div untuk tag img dan memberi mereka lebar dan tinggi?
Sesuatu seperti di bawah ini. Lihat apakah itu memperbaiki masalah untuk Anda.

@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>
  `,
})