Where is the auto-scroll feature?

[chenenpei]

Hi there,

I see your demo have a feature that the page can scroll down (or up) automatically when the grid-item is dragged to the bottom (or top) of the page. While it doesn't show in my local branch which is cloned from your master.

And I find a few lines of commented codes about 'autoScroll' in the output script. Does it mean that this feature has been moved out for some reasons? Will it be added back in the future, or can I do something to implement it in my project?

By the way, thank you for your amazing work!

[freeman983]

+1

[gmsa]

Sorry, don't really know what auto-scroll you are talking about...the only autoScroll option I see is from interact.js, wich is a dependency

[chenenpei]

@gmsa Oh, thanks! I will check it out and put my feedback here later.
BTW, I think the autoScroll feature is quite useful especially when you want to move one item from one row to another.

[chenenpei]

@gmsa I check the doc interact.js in which it gives an api like this:

interact(element)
  .draggable({
    autoScroll: true,
  });
  .resizable({
    autoScroll: {
      container: document.body,
      margin: 50,
      distance: 5,
      interval: 10
    }
  });

So I try to played around the GridItem.vue and modified two watchers which are 'draggable' and 'resizeable':

draggable: function() {
            var self = this;
            if (this.interactObj === null || this.interactObj === undefined) {
                this.interactObj = interact(this.$refs.item);
            }
            if (this.draggable) {
                var opts = {
                    autoScroll: true,
                    ignoreFrom: this.dragIgnoreFrom,
                    allowFrom: this.dragAllowFrom,
                };
                this.interactObj.draggable(opts);
                /*this.interactObj.draggable({allowFrom: '.vue-draggable-handle'});*/
                if (!this.dragEventSet) {
                    this.dragEventSet = true;
                    this.interactObj.on("dragstart dragmove dragend", function(event) {
                        self.handleDrag(event);
                    });
                }
            } else {
                this.interactObj.draggable({
                    enabled: false,
                });
            }
        },

resizable: function() {
            var self = this;
            if (this.interactObj === null || this.interactObj === undefined) {
                this.interactObj = interact(this.$refs.item);
            }
            if (this.resizable) {
                var opts = {
                    autoScroll: {
                        container: this.$parent.$el,
                        margin: 50,
                        distance: 5,
                        interval: 10
                    },
                    preserveAspectRatio: false,
                    edges: { left: false, right: true, bottom: true, top: false },
                    ignoreFrom: this.resizeIgnoreFrom,
                };

                this.interactObj.resizable(opts);
                if (!this.resizeEventSet) {
                    this.resizeEventSet = true;
                    this.interactObj.on("resizestart resizemove resizeend", function(event) {
                        self.handleResize(event);
                    });
                }
            } else {
                this.interactObj.resizable({
                    enabled: false,
                });
            }
        },

While after these works I still can't get the autoScroll feature in the grid-layout. Did I misunderstand the api or just changed in wrong place?

Look forward to your reply, thanks!

[gmsa]

I don't think that autoScroll option on interact.js has anything to do with what you are looking for. If you say it's working on one of the demos, I never set any autoScroll anywhere, probably is something else.

[chenenpei]

Actually, all of online demos have this feature, while it does not appear in those examples contained in the source code.
Would you mind checking the differences among them? Or could you give some suggestions about how to implement this feature?

[LavrovE]

same problem here.

[llezenelrahc]

#580
@chenenpei

[llezenelrahc]

i try to fix this by add a feature of passing through option from itemConfig to the watcher init the internal interactjs instance config obj......

[llezenelrahc]

and the official doc is so misleading...
actually both drag and resize share same config ,but official set the option in drag to be autoScroll:true which is so misleading one

[inesskeeled]

Hello! Is there any update about the auto-scroll option or is there any plans to integrate this in the future?

Thanks

[chaoukibenfradj]

Hi,
Is there any updates ?

Thank you

[ginkosen]

auto-scroll feature need official version support too .

[gmsa]

merged and included on release 2.4.0

[chaoukibenfradj]

@gmsa Sounds promising, thank you so much 😊

[songispm]

Can you merge the recent new features (like this) to vue3 and release a new vue3.0 beta? Thanks a lot. @gmsa

[NikitaRomanov1]

Hi, still don't work auto scroll event. Can you explain, how to use it in right way? I've got obj in data:
resizeOptions: { autoScroll: { container: document.getElementById('dashboard-grid'), margin: 50, distance: 5, interval: 10, }, },
and :resize-option="resizeOptions" in grid-item