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.

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?

Answers (3)

artf• January 4, 20183 reactions

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') })
	}
});

Jogai• March 20, 20180 reactions

Code SnippetTEXT

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• April 17, 20180 reactions

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.

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

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

Browse Plugin Categories