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

[QUESTION] Disable Drag Feature, Not Ability #1890

Closed MACscr closed 5 years ago

MACscr commented 5 years ago

I want to create my own dragging and placement abilities. I love grapesjs, but really want more control over how dragging elements work in the editor area. Is there a way to disable the built in method so that I can create my own? I know the designer mode is on the roadmap, but I need the feature now, so I am going to add that myself, but first I need stop grapesjs default feature from interfering with it. I already have drag positioning and resizing elements working perfectly in my own custom app, so I know I can get it to work if I can find a way to stop grapesjs's native functionality from interfering with it.

I dont think its a simple as doing: data-gjs-draggable="false"

Also maybe there is a way I could leave that as true and override that the function that handles that?

Right now I am using jquery's draggable/resizable classes to do it with my own app. I simply wrap any element I add to make it selectable and editable:

    function make_modifiable() {

        console.log('now modifiable');
        $('.pub_element').draggable({
            start: function() {
                setCurrent($(this));
            },
            stop: function() {
                update_html();
            },
            containment: "parent",
            cancel: false
        }).resizable({
            start: function() {
                setCurrent($(this));
            },
            stop: function() {
                update_html();
            },
            handles: "all"
        });
    }

    $(".add_element").on("click", function() {
        var element = $(this).attr('id');
        var dyn_e = buttons[element];
        if (dyn_e != undefined) {
            var el = $("<div class='pub_element'></div>");
            el.append($(dyn_e));
            el.appendTo($(".cvtr-modal"));
        }
        make_modifiable();
    });

I appreciate any advice and all your great work on this project. Hoping others that are more experience with this project can brainstorm with me a bit on it. There are a couple other great projects out there that already have this feature, but they aren't even close to grapesjs in documentation, UX/UI, and capabilities, so hoping I can creating this functionality for myself and others to use with grapesjs.

artf commented 5 years ago

Well, for the component itself, when you click on move icon, it runs the tlb-move command so you can actually overwrite it by adding a new one with the same ID, but unfortunately there is no easy way to change the drag behaviour of blocks.

ps. I started working on the Designer mode, the development is slow but at least it started, I hope to post soon some follow up issue

lock[bot] commented 4 years ago

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.