Moveable: draggable issue with contentEditable

[ajinkya-dev]

Environments

• Framework name: Angular
• Framework version: 8.2.14
• Component name:
• Component version:
• Testable Address(optional):

Description

If we create div tag inside div tag and set contentEditable="true" then draggable doesn't work.

It's not working because we have set this:
if (inputEvent.target.nodeName === "DIV") {
stop();
}

drag should stop only for the element which is set as contentEditable="true".

Demo

See attached gif:

[daybrush]

@ajinkya-dev

This issue seems to be similar to https://github.com/daybrush/moveable/issues/148.

I'll add this feature soon.

[jagannath7775]

@ajinkya-dev @daybrush

To check target element is contentEditable or not,
HTMLElement.isContentEditable is read-only property to check this

The HTMLElement.isContentEditable read-only property returns a Boolean that is true if the contents of the element are editable; otherwise it returns false.

MDN Docs

[daybrush]

@ajinkya-dev @jagannath7775
moveable's new version is released.

• moveable 0.17.1
• react-moveable 0.20.1
• preact-moveable 0.19.1
• ngx-moveable 0.13.1
• svelte-moveable 0.8.1

add dragArea, padding props.

https://daybrush.com/moveable/release/latest/doc/Moveable.html#dragArea
https://daybrush.com/moveable/release/latest/doc/Moveable.html#padding