Issue #1890💬 AnsweredOpened March 13, 2019by MACscr0 reactions

Disable Drag Feature, Not Ability

快速解答by artf

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 leas...

Read full answer below ↓

Question

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.

Answers (2)

artfMarch 22, 2019

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]March 21, 2020

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.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.