Issue #909Opened February 28, 2018by konstantin550000 reactions

[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%',

Code SnippetTEXT
>         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)

konstantin55000February 28, 20180 reactions

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/

konstantin55000February 28, 20180 reactions

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.

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

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.