how can i drag one element into another?

[sam110386]

hey guys, i am trying to integrate this plugin into custom php website, but one element darg into another is not working. Like if i want to drag a button into col block then button is not adding inside col element.

Is there any setting variable thats enable or disable this feature? I checked https://grapesjs.com/ demo page and same works in their demo page.

Please help me

[HansSchouten]

Hi, did you try this code:

<div class="container">
    [block-container]
</div>

Since this library is more advanced than GrapesJS (not only static html blocks, but also dynamic PHP blocks) it is not allowed to just drop content everywhere. This is because dropping elements in a block that is dynamically rendered by PHP cannot be stored, as there is no way to know where in the PHP script I should paste that HTML snippet. Therefore only text inside HTML blocks can be directly changed and if you want some area to make droppable you should explicitly tell that to the pagebuilder.

[sam110386]

hi HansSchouten,

Thank you for your reply. But my problem is different, when i try to drag & drop an element then parent ever remains most outer div while it should move to hovered element, please check attached screen shot.

Is there any js code that can help me to make it workable like i can drop any element freely inside any element? I dont need PHP code to use in it.

[HansSchouten]

Can you share the html you are using for the blocks?

[sam110386]

@HansSchouten Its not related to my custom blocks, i am also using "gjs-blocks-basic" plugin for col & TEXT element and these basic block elements also not working. I am trying to host my project on server, will share page url once done on my end

[HansSchouten]

Ah ok, now I get it. You are trying out some of the default GrapesJS extensions. This project is not aiming to be the standard GrapesJS. I have 1500+ lines of custom JS to hack GrapesJS into a useable state for managing complex dynamic pages. So it could very well be that the original GrapesJS plugins do not work properly. Since GrapesJS allows dropping stuff everywhere, I have modified this to be able to make a distinction between the dynamic non-editable and the static editable parts. I think the modified GrapesJS version does not know anymore that elements are allowed to be dropped in these containers.

[sam110386]

ok, any idea how can we bypass this restriction , in your app.js code ?

[HansSchouten]

I am not sure yet what exact JS method is causing this to not work, so we have to play around to figure that out. If you run npm install and then npm run watch in the main folder (that contains the package.json file) it should take over any changes into a new version of the app.js file.

How did you add the gjs-blocks-basic plugin?

[sam110386]

Thank you. Btw i figured it out in file manage-editable-components.js, after comment //disableAllEditFunctionality(component); in line #590

I am using your plugin in laravel project. I added "gjs-blocks-basic" in config.php and included plugin js file in layout.php file. I know i have to work more to make everything workable

[dumithsalinda]

@HansSchouten Is there a way to add [block-container] in a php file. Thank you

[HansSchouten]

Yes there is a way to do this. I created a html block called: layout-blocks-container with the following view.html:

<div phpb-blocks-container></div>

Next in your php block you can use the snippet: [block slug="layout-blocks-container"] to allow dropping blocks.

[derciesto]

disableAllEditFunctionality(component)

@sam110386 please you help me wo

i am not able to put text video or image in grid i follow your step but still not work.

[sam110386]

@derciesto make sure browser loading same file which you edited ie. manage-editable-components.js

If you dont want to edit the plugin core files then you can override all plugin files, after moving full directory outside of vendor and changing plugin path in composer.js