Is it possible to exchange item positions when moved horizontally?

[TonyYanOnFire]

I have a compact layout. When I drag an item over another one right next to it, the latter is forced to move to the next row. Is it possible to swap their positions instead?

[gwinnem]

@dhamet70 Are you looking for something like this https://vue-ts-responsive-grid-layout.winnem.tech/examples/15-example

Click on the horizontalShift checkbox

[TonyYanOnFire]

@dhamet70 Are you looking for something like this https:vue-ts-responsive-grid-layout.winnem.tech/examples/15-example

Click on the horizontalShift checkbox

This is the feature I need! I noticed that this is a Vue 3 library, but I have to work with Vue 2. It seems you are the author of this library. Do you have any plans to migrate it to Vue 2?

[TonyYanOnFire]

BTW, when directly opening https://vue-ts-responsive-grid-layout.winnem.tech/examples/15-example, I get a 404 page with the message: 'Not Found. The requested URL was not found on this server.' However, when accessed through the homepage and then opening the examples page, it works just fine. It seems there's an issue with the routing on your website.

[gwinnem]

Hi Tony, I have no plans to make a 2.0 version. Sorry for that.

Regards

Geirr

On Thu, 26 Oct 2023 at 05:09, Tony Yan @.***> wrote:

@dhamet70 https://github.com/dhamet70 Are you looking for something like this https:vue-ts-responsive-grid-layout.winnem.tech/examples/15-example

Click on the horizontalShift checkbox

This is the feature I need! I noticed that this is a Vue 3 library, but I have to work with Vue 2. It seems you are the author of this library. Do you have any plans to migrate it to Vue 2?

— Reply to this email directly, view it on GitHub https://github.com/jbaysolutions/vue-grid-layout/issues/743#issuecomment-1780346074, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABRBD4CBCQFB2CILVHOFBS3YBHH5XAVCNFSM6AAAAAAUKYYT4SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOBQGM2DMMBXGQ . You are receiving this because you commented.Message ID: @.***>

[gwinnem]

Hi Tony. This is coming from the vitepress config. It will be fixed in the next update.

Regards

Geirr

On Thu, 26 Oct 2023 at 08:41, Tony Yan @.***> wrote:

BTW, when directly opening https://vue-ts-responsive-grid-layout.winnem.tech/examples/15-example, I get a 404 page with the message: 'Not Found. The requested URL was not found on this server.' However, when accessed through the homepage and then opening the examples page, it works just fine. It seems there's an issue with the routing on your website.

— Reply to this email directly, view it on GitHub https://github.com/jbaysolutions/vue-grid-layout/issues/743#issuecomment-1780504634, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABRBD4FZYYZLB7RHIYIYQI3YBIAZXAVCNFSM6AAAAAAUKYYT4SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOBQGUYDINRTGQ . You are receiving this because you commented.Message ID: @.***>

[iAgriEugene]

Is there any way to do this using Vue-Grid-Layout?

[dhamet70]

It's possible, after looking at the differences between the two components. I can do it but I have a problem installing vue-grid-layout on my local machine to develop, can you please send me some instructions to install the project properly ?

 Dominique HAMET

Le lun. 2 sept. 2024 à 05:38, iAgriEugene @.***> a écrit :

Is there any way to do this using Vue-Grid-Layout?

— Reply to this email directly, view it on GitHub https://github.com/jbaysolutions/vue-grid-layout/issues/743#issuecomment-2323750452, or unsubscribe https://github.com/notifications/unsubscribe-auth/AES73FFH4UPDD2JLRDXECTDZUPMTVAVCNFSM6AAAAABNPPESZOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMRTG42TANBVGI . You are receiving this because you were mentioned.Message ID: @.***>

[iAgriEugene]

Turns out it is possible! Somebody wrote some code to do this: https://github.com/jbaysolutions/vue-grid-layout/issues/604

moveEvent: function (i, newX, newY) { var p; for (p = 0; p < this.layout.length; p++) { //Horizontal swapping if ( newX >= this.layout[p]["x"] && newX < this.layout[p]["x"] + this.layout[p]["w"] && this.layout[i]["y"] == this.layout[p]["y"] && i != this.layout[p]["i"] ) { let initialX = this.layout[i]["x"]; let finalX = this.layout[p]["x"]; this.layout[i]["x"] = finalX; this.layout[p]["x"] = initialX; } //Vertical swapping if ( newY >= this.layout[p]["y"] && newY < this.layout[p]["y"] + 1 && this.layout[i]["x"] == this.layout[p]["x"] && i != this.layout[p]["i"] ) { let initialY = this.layout[i]["y"]; let finalY = this.layout[p]["y"]; this.layout[i]["y"] = finalY; this.layout[p]["y"] = initialY; } }