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 工作）。 如果您指导我，我很高兴实现该功能。

从理论上讲，如果我实现您的演示，它应该工作得很好，但就我而言，我在该容器中有大量元素，并且禁用无法正常工作。

你有代码片段要分享吗？ 或者你可以 fork 演示应用程序并告诉我你的意思是什么？ 我很难通过阅读代码或演示来描绘用例。

<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 发布后，我可以立即添加此功能。

酷，你知道那会是什么时候，你需要任何帮助吗？

2.0 的 PR 已上线https://github.com/bfwg/ngx-drag-scroll/pull/145。 我只是在做一堆测试以确保没有回归。 这是新的自述文件https://github.com/bfwg/ngx-drag-scroll/blob/7592e3b08894ce23347c392c3fb88fc4c545323b/README.md

如果您可以让 PR 运行一下，这样我们就可以让它更快地运行，那就太好了。 谢谢！

拖动滚动项
看起来很不错，也可以使用类似的东西
忽略拖动滚动项
想象一个例子，如 trello，你有不拖动背景的列。

是的，我正在考虑添加一个drag-scroll-disabled" attribute in the drag-scroll-item` 来禁用父应用程序的拖动和滚动。 你怎么认为？

你好，这方面有进展吗？

它在我的一个工作分支上，我忘记了。 我将推动我的更改，并希望在今天之前完成。 对此感到抱歉😅

好听，谢谢

更改在 7.1.0 中。 您可以在子元素上添加“drag-disabled”属性，它将禁止对该元素进行拖动。

已在 #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