[QUESTION] Disable Drag Feature, Not Ability
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)
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
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.
Issue #1485
How to prevent styling html components?
Im trying to create some templates, which should not be editable and styleable. So that when i drag in my blocks then should stay as define...
Issue #1009
[Question] Richtext editor for trait
Is there way to have richtext box for trait. We want to user to insert rich text for trait and not sure how can we do it. We have below use...
Issue #1318
Question: How to enable Event of mouse to increase value of input
hi @artf I want to know Is there any way to enable input mouse scroller in style manager as you can my screenshot. i want to initalize scro...
Issue #1659
[Question] How to upload PDF and others files - GrapesJS
Hi @artf, I started using your web builder a few days ago and I found it very well done ! I was able to customize it in my own way but I ha...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.