Make an entire element draggable, not just the handle

[austinbiggs]

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?

[artf]

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]

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]

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.

[Sibbir7350]

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

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.