Grapesjs: Make an entire element draggable, not just the handle

Created on 4 Jan 2018 · 5Comments · Source: artf/grapesjs

I'm working on modifying the handle from draggable elements, in addition to having a handle, I'd like the entire element to be draggable. Looking through the code, I would assume I would just need to attach the tlb-move command to a draggable element on select.

editor.on( 'component:selected' , function( model ) {
    var selected = editor.getSelected();
    var dragger;

    if (!sel || !sel.get('draggable')) {
        console.warn('The element is not draggable');
        return;
    }

    console.log( 'Selected: ', selected );
});

The above code, on select, writes the selected component to the console. From here I believe I would need to add an event listener for dragging, however, my attempts to attach a listener using .on() have failed. Any advice on how to attach an event listener to a select component?

outdated

Source

austinbiggs

Most helpful comment

Try with something like this

editor.on('component:selected', () => {
    const selected = editor.getSelected();
    if (!selected || !selected.get('draggable')) return;
    const el = selected.view.el;

    if (!el._hasCustomEvent) {
        el._hasCustomEvent = 1;
        el.addEventListener('mousedown', () => { editor.runCommand('tlb-move') })
    }
});

artf on 4 Jan 2018

👍3

All 5 comments

Try with something like this

editor.on('component:selected', () => {
    const selected = editor.getSelected();
    if (!selected || !selected.get('draggable')) return;
    const el = selected.view.el;

    if (!el._hasCustomEvent) {
        el._hasCustomEvent = 1;
        el.addEventListener('mousedown', () => { editor.runCommand('tlb-move') })
    }
});

artf on 4 Jan 2018

👍3

I followed your suggestion, but I get an error: "Uncaught TypeError: Cannot read property 'type' of undefined"

    editor.on('component:selected', () => {
        const selected = editor.getSelected();
        if (!selected || !selected.get('draggable')) return;
        const el = selected.view.el;
        if (!el._hasCustomEvent) {
            el._hasCustomEvent = 1;
            el.addEventListener('mousedown', () => { editor.runCommand('tlb-move') });
            console.log("should work");
        }
    });

If I click once on a component the console log is executed saying "should work", but if I drag, I get the error. Any further suggestions?

Jogai on 20 Mar 2018

Thanks so much for the update! I'm still a bit struggling to implement it right. I made an example:
https://codepen.io/anon/pen/vRoRBX

The example is preventing the user from doing too much. Most of the elements are made non-draggable. The user should be able to reorder.
I've got several problems with selecting and dragging. Here are the steps I take and the problems I encounter:

Click on item number 2. Problem 1: The element is not selected, only highlighted.
Click on item number 1, its selected now visible by the thicker highlight.
Click on item number 2, which get selected. Problem 2: Number 1 stays 'selected'.
Drag (without clicking first) item number 1 below item 3.
Problem 3: The 'selected' state isnt moved if you drag immediately, resulting in dragging number 2 instead of number 1.

Jogai on 17 Apr 2018

Hello @artf ,

Can you help to make a movable component ?
I mean if Can we move an image or div anywhere in our editor..

it always start from left only.

I want to move by dragging to middle or my custom position.

Please help me @artf