[Question] [Possible issue] events are not fire on canvas drag and drop.
Question
Hello to everybody. The issue is: Events, just are not fire, after dragging on (into) canvas. editor.on('canvas:dragover') editor.on('canvas:drop') editor.on('canvas:dragenter') editor.on('canvas:dragend')
The code is just the demo code from repo, with adding this 4 events. Here is the code:
var editor = grapesjs.init({ showOffsets: 1, noticeOnUnload: 0, container: '#gjs', height: '100%',
> fromElement: true,
> storageManager: { autoload: 0 },
> styleManager : {
> sectors: [{
> name: 'General',
> open: false,
> buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom']
> },{
> name: 'Dimension',
> open: false,
> buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'],
> },{
> name: 'Typography',
> open: false,
> buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-shadow'],
> },{
> name: 'Decorations',
> open: false,
> buildProps: ['border-radius-c', 'background-color', 'border-radius', 'border', 'box-shadow', 'background'],
> },{
> name: 'Extra',
> open: false,
> buildProps: ['transition', 'perspective', 'transform'],
> }
> ],
> },
> });
>
> editor.on('canvas:dragover', function(dt, currentComp) {
> console.log('event canvas dragover', dt, currentComp);
> });
>
> editor.on('canvas:dragend', function(dt, currentComp) {
> console.log('canvas drop: ', dt, currentComp);
> });
>
> editor.on('canvas:dragenter', function(dt, currentComp) {
> console.log('canvas dragenter', dt, currentComp);
> });
>
> editor.on('canvas:drop', function(dt, currentComp) {
> console.log('canvas drop: ',dt, currentComp);
> });
Much thanks for reply.Answers (3)
Code is syntax. valid. Here is jsfiddle with code https://jsfiddle.net/s9b2k7vp/ Here is the demo: https://www.screencast.com/t/pWcpkM7QO
Update. Events are firing, but just after block drops into canvas. I'm not sure if this an issue, because what about event canvas:dragend and canvas:dragover, if block does not drop into canvas, they just not fire at all. Here is the demo, please look in the video: https://www.screencast.com/t/9xHVwwp3C54J https://jsfiddle.net/s9b2k7vp/2/
Much sorry. Event was not fire because of prvious version of grapes.js Thanks to everybody for attention.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #905
[Question] need to find nessesary event.
Hello to all! When dragging block into canvas, and drop it: ... we have an event to detect, what block we drop in. ?: but when i drop block...
Issue #1150
[Question] Get Uploads as Base64
Hello All, I need help integrating this into a web app that I have. Everything renders and works as expected but I am trying to get the upl...
Issue #1875
[QUESTION] ID changes when importing html or passing html in components prop in config.
Hi, I built a component and block that I can drag and drop in the canvas. My issue is that some styles rely on the ID. I know this might no...
Issue #1683
How to change id/class when new element drop on editor or render element with dynamic ip?
Hello @artf , Hope you are doing well. I have two questions regards dynamic blocks adding, 1) Is it possible to render the block with dynam...
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.