[QUESTION] Auto wrap every component drag into canvas with another component

Question

I am trying to make sure every component drag into the canvas to be wrapped with a column component. To achieve that I use canvas event.

First I disabled window event to prevent default html 5 drag and drop event to be fired. canvas:drop event

ditor.on('canvas:drop', function (dataTransfer) {
    event.preventDefault()
})

Let's say that my column component is so simple, only a single div.

canvas:dragdata event

editor.on('canvas:dragdata', handleDragData)

function handleDragData (dataTransfer, result) {
    if (!event.currentTarget.closest('.column')) {
        result.content `
            <div class="column" data-gjs-type="column">
                <div class="column-inner">
                    ${dataTransfer.getData(dataTransfer.types[0])}
                </div>
            </div>
        `
}

Above code return error, saying that dataTransfer not defined

What I understand is we can customize what we drop to the canvas with result.content

something like

//...

result.content = { type: 'heading' }

//...

result.content = `<div>I will replace the default dragged component</div>`

What I don't understand is how to wrap the dragged component with element/component.

Answers (2)

afdallah• August 2, 20192 reactions

@pouyamiralayi I managed to solve the problem by making component as an object. Like so.

result.content = {
    tagName: 'div',
    removable: true, // Can't remove it
    draggable: true, // Can't move it
    copyable: true, // Disable copy/past
    classes: ['container'],
    type: 'grid',
    attributes: { title: 'here' },
    // style: { color: 'red'},
    components: {
        tagName: 'div',
        classes: ['row'],
        hoverable: false,
        selectable: false,
        draggable: false,
        components: {
            tagName: 'div',
            classes: ['col-auto'],
            type: 'column',
            style: { width: '100%', flex: 1 },
            components: {
                // type: JSON.parse(dataTransfer.getData(dataTransfer.types[0]))['type']
                type: result.content.type
            }
        }
    }
}

Anyway thanks for trying to help.

pouyamiralayi• August 2, 20191 reactions

Hello there! the event you are looking for is this editor.on('block:drag:stop', function (element) { element.replaceWith({ tagName:'div', style:{'border': '1px solid red'}, components: [element] }) }) Notice here I am using a red bordered div as my wrapper; in your case it is the column. cheers.

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.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

[QUESTION] Auto wrap every component drag into canvas with another component

Question

Answers (2)

Related Questions and Answers

[Question] how to append a button inside default modal and catch it's click event

[QUESTION] Drag component over canvas with script, script appended multiple times.

[QUESTION] Component "first render" event

[QUESTION] Custom component default children

Paid Plugins That Match This Issue

Browse Plugin Categories