Make an entire element draggable, not just the handle

Question

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

artf · Accepted Answer

Try with something like this

Jogai · Answer

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

Jogai · Answer

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

Make an entire element draggable, not just the handle

Question

Answers (3)

Related Questions and Answers

Prevent modifying specific image components

component:remove action

How to make settings text multi-lingual

Problem trying to inject new HTML content in the Editor

Paid Plugins That Match This Issue

Related tutorials

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Browse Plugin Categories