Ngx-drag-scroll: alternatif drag-scroll-nonaktif untuk anak-anak

Hai, @CrackerakiUA . Sudahkah Anda mencoba [drag-scroll-disabled]="disabled" ?

tambahkan kode di bawah ini

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

dan di tempat anak:

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

juga menghadirkan bool untuk melihat apakah itu berubah. [drag-scroll-disabled] terasa seperti bekerja pada nilai awal dan ketika saya mengubah variabel, itu tidak berubah. Aneh karena dalam contoh Anda, sakelar berfungsi.

Koreksi saya jika saya salah. Pada dasarnya, Anda ingin drag-scroll-disabled untuk menonaktifkan mouseenter , dan mouseleave untuk semua elemen anak-anak dalam wadah direktif.

tidak seperti untuk semua elemen anak-anak, fitur kerennya adalah menambahkan atribut ke anak mana pun dan untuk itu gulir seret anak akan dibatalkan (dengan cara stopPropagation berfungsi). Saya senang menerapkan fitur itu, jika Anda membimbing saya.

Secara teoritis jika saya mengimplementasikan demo Anda, itu akan berfungsi dengan baik, tetapi dalam kasus saya, saya memiliki banyak elemen dalam wadah itu dan penonaktifan tidak berfungsi dengan baik.

Apakah Anda memiliki cuplikan kode untuk dibagikan? Atau bisakah Anda memotong aplikasi demo dan menunjukkan kepada saya apa maksud Anda sebenarnya? Saya mengalami kesulitan untuk membayangkan kasus penggunaan dengan membaca kode atau demo.

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

Silakan periksa kodenya, jika itu tidak memperjelas ide, saya akan membuat demo.

Terima kasih @CrackerakiUA , saya mendapat ide. Saya akan segera mengeluarkan versi 2.0.0 yang akan memperkenalkan drag-scroll-item untuk menandai semua elemen turunan. Setelah 2.0.0 keluar, saya dapat menambahkan fitur ini segera setelahnya.

Keren, apakah Anda tahu kapan itu akan terjadi, apakah Anda memerlukan bantuan untuk itu?

PR untuk 2.0 naik https://github.com/bfwg/ngx-drag-scroll/pull/145. Saya hanya melakukan banyak tes untuk memastikan tidak ada regresi. Ini README baru https://github.com/bfwg/ngx-drag-scroll/blob/7592e3b08894ce23347c392c3fb88fc4c545323b/README.md

Akan sangat bagus jika Anda dapat menjalankan PR itu sehingga kami dapat membuatnya lebih cepat. Terima kasih!

drag-scroll-item
terlihat sangat bagus, mungkin juga menggunakan sesuatu seperti
abaikan-drag-scroll-item
bayangkan contoh sebagai trello di mana Anda memiliki kolom yang tidak menyeret latar belakang.

Yup, saya sedang berpikir untuk menambahkan drag-scroll-disabled" attribute in the drag-scroll-item` untuk menonaktifkan aplikasi induk agar tidak menyeret dan menggulir. Bagaimana menurut anda?

Halo, ada kemajuan dalam hal ini?

Itu ada di salah satu cabang kerja saya dan saya lupa tentang itu. Saya akan mendorong perubahan saya dan mudah-mudahan mendapatkannya hari ini. Maaf tentang itu

Kedengarannya bagus, terima kasih

Perubahannya ada di 7.1.0. Anda dapat menambahkan atribut 'drag-disabled' pada elemen anak, dan itu akan menonaktifkan drag pada elemen tersebut.

Diselesaikan di #205

Hei, saya telah menguji 7.1.0 dan tidak berfungsi :(
Contoh saya:

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

Elemen tugas Anda tidak memiliki atribut 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>

tepat setelah saya menambahkan drag-scroll-item drag-scroll berhenti bekerja. Mencoba kasing yang Anda tambahkan dan juga:

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

dan skenario selanjutnya:

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

Itu aneh. Bisakah Anda mereproduksi di aplikasi demo karena ini berfungsi dengan baik untuk saya.

Saya menggunakan contoh Anda dan membuat sesuatu seperti di bawah ini yang tidak berfungsi:

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

Faktanya drag-scroll-item tampaknya tidak berfungsi sebagaimana mestinya, container drag-scroll memiliki kemampuan untuk menyeret.

@bfwg apakah contoh saya bekerja di pihak Anda?

@bfwg Dengan apa atau mengapa? menggunakan drag-scroll memblokir semua elemen jenis gambar seret hantu di situs web, saya tidak dapat menemukan cara memperbaikinya

Masalah ini adalah tipuan, silakan lihat komentar saya https://github.com/bfwg/ngx-drag-scroll/issues/223#issuecomment -494259349

Saya telah menunjukkan masalahnya. @arman2r