Ngx-drag-scroll: منع انتشار النقرات مباشرة بعد السحب والإفلات

تضمين التغريدة
نشكرك على الإبلاغ عن هذه المشكلة ، هل تريد إجراء علاقات عامة بخصوص هذا الخطأ؟

لا ، ما زلت جديدًا جدًا في هذا الأمر. بدأ التطوير في Angular منذ أقل من 18 شهرًا وانضم إلى GitHub أمس ؛)

لا تقلق ، سأحاول إصلاحه عندما يكون لدي الوقت.

مرحبًا يا رفاق ، لدي أيضًا هذه المشكلة ، هل هناك أي تقدم في الإصلاح / حل بديل؟

يا @ ستيوارت كلارك 45

أنا أعمل على إصدار الإصدار 2.0 ، وآمل أن تختفي هذه المشكلة بحلول ذلك الوقت. إذا لم يكن كذلك ، فسأعود وأصلحها.

bfwg هذا عظيم شكرًا جزيلاً ، مكتبة صغيرة لطيفة حقًا بخلاف هذا الخطأ. هل لديك فكرة عن موعد إصدار v2.0؟

@ ستيوارت كلارك 45

لا توجد مشكلة ، يمكن تتبع تقدم 2.0 في # 66 # 68. بعد تحقيق بسيط ، يصعب إصلاح المشكلة أكثر مما توقعت. سأحاول إنشاء علاقات عامة جديدة لإصلاحها مباشرة بعد إصدار 2.0. آسف للتأخير.

bfwg رائع يبدو أنك على قمة الأشياء ، شكرًا جزيلاً: إبهام:

لا أعرف ما إذا كان هذا مرتبطًا ، لكن لا يمكنني تحديد نص على أي من تطبيقات الزاوية الخاصة بي باستخدام الماوس لأسفل وتمييز النص. يحدث هذا بعد استيراد DragScrollModule. ذهبت إلى الصفحة التجريبية وتأكدت من أن اختيار النص لا يعمل أيضًا على تلك الصفحة على الإطلاق.

الطريقة الوحيدة لتحديد النص الآن ، في أي مكان على الصفحة ، هي باستخدام النقر المزدوج بالماوس ولوحة المفاتيح لتمييز النص ...

هل هناك أي شيء يمكن القيام به مؤقتًا لتجاوز هذا السلوك؟

لقد قمت بحل هذا باستخدام (linksLeftBound) لمعرفة ما إذا كان يتم سحبه لمنع النقر.
قم بإضافة (ReachLeftBound) إلى 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>

كل شيء يعمل بشكل جيد إلا عند التمرير ، لا يزال شريط التمرير يظهر على الرغم من أنني قمت بضبط التعطيل على "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>
  `,
})