TextEditor not clickable when within node when dragging=true, Enable Dragging only by selected child element

[NeoMarine]

I am attempting to display a draggable (re-organizable) list of text editors, each editable by clicking on them (editable on click). The problem is, when :draggable="true", it will prevent all clicks passed to the text editor from triggering anything/working.

Additionally, I have successfully managed to enable dragging only when a child element (with ref="dragThis") to drag the element, but it only works if :draggable="true".

So, I am in a bit of a pickle it seems.

The text editor I am using is Vue Medium Editor

[phphe]

what's your version? or any demo?

[NeoMarine]

Versions: "vue-draggable-nested-tree": "^2.1.6", "vue2-medium-editor": "^1.1.5",

You can still click on Buttons, but NOT the Vue Medium Editor. It seems to maybe effect ContentEditable html? Does perhaps the dragging work on a Timer?

Using @click.stop or @mousedown.stop on a child element will still not allow me to select the Vue Medium Editor from within a tree node.

or any demo?

I've included some example files, I scrapped out as much of the rubbish code as I could. I think you'll need to implement this into a demo project - I've included the package.json and composer.json so you can see what's used.

Some explanations for the files: resources/css <- just contains some css you may want resources/js/exampleEditor.js <- just includes what's needed

The views/editor/example.blade.php contains some dummy data under $data_events.

As for the components under resources/js/components/editor/ (in order of how they're loaded) 1) ExampleEvents.vue <- loads each "event" 2) ExampleEvent.vue <- loads a list of sections for each "event" 3) ExampleSectionList.vue <- loads each "section" into a Vue Draggable Nested Tree 4) ExampleSection.vue <- the actual vue medium editor is here!

In ExampleSectionList.vue, change ":draggable="true" to :draggable="false", and you will now be able to click on the Vue Medium Editor as normal, but when it's "true" it won't work.

EXAMPLE FILES: Example Files.zip

[phphe]

i tried it on codepen: https://codepen.io/phphe/pen/ePqBwL it can't run. it is helpful if there is a demo on codepen

[NeoMarine]

Never used a codepen before - let me try and fix it for you!

[NeoMarine]

Here, I've got a demo working (finally) which demonstrates the issue.

LINK: https://codepen.io/neomarine/pen/ZqgeJQ

Is it possible for you to: a) Make it so that it ONLY drags when holding down on the "Hold to Drag" button. b) Make it so that the editor is selectable within the tree. c) (Additional feature request) Prevent moving the tree to any level other than level 1 (make it a non-nestable tree by simply setting a variable, e.g. "isNestable = false").

[phphe]

https://codepen.io/phphe/pen/gBVxbz use getTriggerEl to set draggable element

[NeoMarine]

Thank you! I couldn't understand the documentation on getTriggerEl (I actually tried that also). I would think it's a good thing to include in your documentation (as an example) on how to use getTriggerEl- thanks again!