GrapesJS / grapesjs

Free and Open source Web Builder Framework. Next generation tool for building templates without coding
https://grapesjs.com
BSD 3-Clause "New" or "Revised" License
22.36k stars 4.05k forks source link

Dragging items do not position on intital drag? #2824

Closed tonypartridge closed 2 years ago

tonypartridge commented 4 years ago

So when I drag a component/item from the bar to the center it will not go where I told it to go... IT always goes about 20% page width to one side? Once added it's adjustable. See this gif: https://gyazo.com/87076de55a1853e80b5dd7ea14ccb94e

Does anyone have any suggestions?

RJCAM commented 4 years ago

Hi @tonypartridge Do you have the last GrapesJS version? This is working fine for me with the dragMode: "absolute", Check this basic code below:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>GrapesJS</title>
    <link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
    <script src="https://unpkg.com/grapesjs"></script>
    <style>
        body,
        html {
            height: 100%;
            margin: 0;
        }
    </style>
</head>

<body>

    <div id="gjs" style="height:0px; overflow:hidden"></div>

    <script type="text/javascript">
        var editor = grapesjs.init({
            height: '100%',
            dragMode: "absolute",
            noticeOnUnload: 0,
            storageManager: {
                autoload: 0
            },
            container: '#gjs',
            fromElement: true,
            plugins: [],
            pluginsOpts: {}
        });

        editor.BlockManager.add('test-block', {
            label: 'Div',
            attributes: {
                class: 'gjs-fonts gjs-f-b1',
            },
            content: `<div class="test">This is a simple div</div>
            <style>
                .test {
                    width: 200px;
                    height: 30px;
                    text-align: center;
                    background-color: lightgrey;
                }
            </style>`,
        });
    </script>
</body>

</html>
artf commented 4 years ago

yeah... I can actually reproduce the same issue when a smaller device view is enabled, probably some kind of regression. I need time to investigate but at the moment I'm kind of busy with other stuff and dragMode is not my priority right now. So, I hope someone else could look at this

soltanloo commented 4 years ago

I have the same issue when I'm using the absolute drag mode. Blocks always fall out of the canvas and I need to scroll to grab them and place them back into the original desired position. @tonypartridge Did you figure out any way to fix this?

tonypartridge commented 3 years ago

@soltanloo not yet, how about you? @artf did you have any luck?

artf commented 2 years ago

@tonypartridge not yet but I close this issue as I'm planning to solve all ones related to absolute positioning here: https://github.com/artf/grapesjs/issues/3770

tonypartridge commented 2 years ago

Ok thank you @artf!