[Solved] RockPageBuilder Drag-and-Drop Compatibility with FireFox

[netcarver]

Hello Bernhard. Congratulations on your module release. I've just been trying this out in your demo at pagebuilder.baumrock.com. I'm using FireFox as the browser and don't seem to be able to drag-and-drop blocks to change their position in the front end view. Perhaps it's just my install. I'm not seeing any JS errors in the console, but I just can't seem to get this working in FF (all good in Chromium.)

[bernhard]

Hi @netcarver thx I've just tried and I can reproduce this. It's a little weird because the sortablejs demos work fine! I'll have to look into this.

Thx for the report 🙂  

[Christophe]

Hello,

With the rockpagebuilder profile, so there is draggable="false" and when clicking on the "crosses" handle to drag the content it becomes draggable="true" and sortable-chosen is added to the class.

On Vivaldi I can see by default in the Styles tab

section[Attributes Style] {

1.  
   -webkit-user-drag: none;

}

and when clicking (without releasing) I then see

section[Attributes Style] {

1.  
   -webkit-user-drag: element;
2.       user-select: none;

}

But in Firefox I don't see anything, probably because it is a webkit-specific property. This property seems to be best supported in Safari.
https://caniuse.com/webkit-user-drag
https://caniuse.com/?search=user-drag

On https://sortablejs.github.io/Sortable/  the handle version demo, for example, works in both Vivaldi and Firefox... and in Vivaldi I still see

div[Attributes Style] {

1. -webkit-user-drag: none;

}

and when clicking

div[Attributes Style] {

1.  
   -webkit-user-drag: element;
2.       user-select: none;

}

So, what is the difference...?

(Also, could it be because of a z-index setting or something else...?)

[Christophe]

Could it be related in any possible way to the fact that in Firefox's console I have around 120 error messages of type request failed with status 404 linked to less files?

With "strange" paths like https://www.project.loc/site/templates/bundle/var/www/project/site/modules/AdminStyleRock/styles/alfred.less

and all the others like https://www.project.loc/site/templates/bundle/var/www/project/site/templates
with less files in folders and sub-folders inside "templates".

[bernhard]

8 hours ago, Christophe said:

Could it be related in any possible way to the fact that in Firefox's console I have around 120 error messages of type request failed with status 404 linked to less files?

With "strange" paths like https://www.project.loc/site/templates/bundle/var/www/project/site/modules/AdminStyleRock/styles/alfred.less

and all the others like https://www.project.loc/site/templates/bundle/var/www/project/site/templates
with less files in folders and sub-folders inside "templates".

Hi @Christophe I don't think that this is related, because I don't get any 404s (except the one for the missing favicon.ico) on FireFox. You can easily cross-check that on pagebuilder.baumrock.com

There are no errors so it means there's something screwed up on your end.

Next, the error you are seeing is - if at all related to my modules - coming from RockFrontend. Please create a topic there where you ideally provide a step-by-step guide to reproduce this issue. Or if that is not possible for whatever reason it would at least be necessary to provide explanations in what you did, what techniques/frameworks/infrastructure you are using, when the error started to come up etc.;

What is weird on first sight is that it seems to try to load less files directly without parsing them to css? Do you have the less module installed? Did you follow the installation video? 

 

[Christophe]

OK, I'll open another topic if I can't resolve this.
Edit: I thought it had disappeared but the less files error messages are coming back.

I've just tried RockPageBuilder's Advanced Live Demo on Firefox, drag-and-drop doesn't work.
On Vivaldi it works.

https://processwire.com/talk/topic/29456-rockpagebuilder-drag-and-drop-compatibility-with-firefox/?do=findComment&comment=238563

[bernhard]

@netcarver and @Christophe please check out v5.1.1 that fixes the issue! https://www.baumrock.com/en/releases/rockpagebuilder/

The demo is also updated: https://pagebuilder.baumrock.com/

[netcarver]

Hi @bernhard, thank you for the update. It now works for top-level blocks - but embedded blocks aren't draggable.

For example, these blocks, from the advanced demo...

[bernhard]

Developing is always so complicated 😄 Haha thx for the spot! I'll have another look 🙂 

[bernhard]

I'm happy to announce that this is fixed in the latest version and will be merged next month 🙂 

We now have a toggle to enable/disable drag&drop and RockFrontend will now also completely hide all ALFRED UI elements if the topbar is hidden @dotnetic

The screencast is already outdated, as the latest version will hide the move handle on the left to indicate that sortable is disabled 🙂 

You can try the latest release on https://pagebuilder.baumrock.com/ (the topbar is disabled on that demo).

[Stefanowitsch]

@bernhard While the new Drag & Drop feature (with the cross icon) works on the RPB Blocks itself it seems not work with repeater items inside the blocks anymore. Can you verify this behaviour?

 

EDIT: ooooops. I just read @netcarver post and your reply on that one. So it will be fixed with the next release.

[bernhard]

@netcarver could you please mark the topic as [solved] ? Thx! 🙂 

[netcarver]

Done - thanks @bernhard