Can't scroll while dragging

[LorediBega]

While dragging an item i can't scroll to the item container. This is the same example as reported on dragular for angular 1 Here is the reported issue No scroll issue and here is the demo demo

Thanks

[monis01]

Hi any Update on this?

[cormacrelf]

https://github.com/cormacrelf/dragula-touch-demo

[LorediBega]

@monis01 unfortunately this is not resolved yet as far as i know. I've done a workaround regarding this issue using javascript and jquery. Here is my code in case it can be helpful:

//Manually scroll page when dragging widgets and the users rolls the mouse wheel 
    document.getElementsByTagName('body')[0].addEventListener('wheel', function(e) {
      let scrollPosition: number = $('.main-panel.ps-container').scrollTop();
      if (e.deltaY < 0 && scrollPosition >= 100) {
        $('.main-panel.ps-container').scrollTop(scrollPosition - 100);
      }
      if (e.deltaY > 0) {
        $('.main-panel.ps-container').scrollTop(scrollPosition + 100);
      }
    });

This is when the user rolls the mouse wheel And below code is when the user drags any widget and reaches the top or bottom of the page

//When the user drags widgets and places the cursor at top/bottom of the page automatically scroll up/down
    let scroll = autoScroll([
      this.autoScroll.nativeElement],
      {
        margin: 20,
        maxSpeed: 5,
        scrollWhenOutside: true,
        autoScroll: function(){
          return $(".gu-unselectable").length > 0;
        }
      }
    );

[cormacrelf]

@LorediBega I can't even reproduce the mouse wheel thing. I can scroll with wheel just fine while dragging anything, on every instance of Dragula I can find. I'm not sure what is different about your code, but I can't consider it a bug until you can show a minimal reproduction, with info about what browsers you experience it on.

[LorediBega]

@cormacrelf my UI is complicated so i can't add reproduction code, i've tested in all browser and is exactly the same behaviour as the demo provided on the first comment with dragular for angular 1, even though when i test it on dragula's site the scrolling is ok . I'm not sure if anyone else is facing the same issue with the mouse wheel or if this is an issue with my UI styles.

[monis01]

Hi @LorediBega , Thanks for the work-around code snippet, we used auto-scroll only to achieve the same. I believe if the maintainers of project would like to add this feature on some boolean condition. Anyway, it worked Thanks

[tatsujb]

@cormacrelf

https://github.com/cormacrelf/dragula-touch-demo

this is really nice! I'm trying to get this to work horizontally, is that possible?

[cormacrelf]

@tatsujb probably. Figure it out yourself by reading the dom-autoscroller docs.

[sandeepsuvit]

Hope this helps someone :)

For this to work you would need to include dom-autoscroller package in your project

Html part

<ul class="list-items">...</ul>
<ul class="list-items">...</ul>

Component code

// Your imports
const autoScroll = require('dom-autoscroller');

// Add **AfterViewInit** on your class so that elements that need scrolling property will get initialised after the view is loaded
ngAfterViewInit() {
    // **list-items** are the dom elements that you need to include for scrolling
    const elements = Array.from(document.querySelectorAll('.list-items'));
    // Enable autoscrolling
    autoScroll(elements, {
      margin: 30,
      maxSpeed: 10,
      scrollWhenOutside: false,
      autoScroll: function () {
        // Only scroll when the pointer is down
        return this.down;
      }
    });
  }

Here is an example implementation. Check out the demo in that repository

[vlodko]

@valorkin any updates on this? are there any plans to include this feature in upcoming versions?

[michastreppel]

I could reproduce this issue by modifying the demo a little bit. The modification is: on the parent css-class add a height restriction (say 300px) and overflow: auto.

The div with class parent then gets a scrollbar which cannot be scrolled while dragging.

[dark8bit]

@michastreppel Hi. Recently, I also encountered this problem, I didn't work scrolling when dragging elements, but this helped https://github.com/valor-software/ng2-dragula#3-add-the-css-to-your-project , I forgot to insert the css code (sorry for the translator)

[michastreppel]

@arkhonimus Thanks for your comment. We already included this css snippet. It did not work for us.