[Bug] Dragging possible even if disabled

[aimeos]

Drag/drop is possible in Draggable trees even if it's disabled by :disableDrag="true" or :eachDraggable="<fcn>" returning false for each node.

When trying to drag a children of the root node the first time, it doesn't work but if you try a second time, it will be possible. When dropping the dragged node, it will vanish.

Example code:

<template>
  <Draggable ref="tree" v-model="treeData" :disableDrag="true" />
</template>

<script>
  import { Draggable, dragContext } from '@he-tree/vue'
  import '@he-tree/vue/style/default.css'

  export default {
    components: { Draggable },
    data() {
      return {
        treeData: [
          {
            text: 'Projects',
            children: [
              {
                text: 'Frontend',
              },
              {
                text: 'Backend',
              },
            ],
          },
        ],
      }
    },
  }
</script>

[phphe]

I guess, first, you selected some text, second, drag works because of selection text. try use css user-select: none; disable text selection in the tree.

[aimeos]

Thanks, it works when applied to element with class .tree-node-inner. Can you add that to the package CSS (either as default or when the node isn't draggable) to prevent the problem?

[phphe]

No. Someone use the drag handle button to trigger the drag, disabling selection may not work for this case.

[aimeos]

There's another unwanted behavior with drag & drop. If the node label is wrapped by an <a> tag (for loading details and WCAG accessibility reasons), all nodes are draggable regardless if :disableDrag="true" and :eachDraggable="() => false" is used.

Example:

<DragTree
	ref="tree"
	v-model="tree"
	:disableDrag="true"
	:eachDraggable="() => false"
>
	<template #default="{ node, stat }">
		<a href="#">
			{{ node.label }}
		</a>
	</template>
</DragTree>

Why is that the case?

[phphe]

It is about HTML Drag and Drop API. https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

[aimeos]

Here's stated that images, links and texts are draggable by default because it's assumed that draggable="auto" is used if the attribute isn't explicitly set: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable

Could you add a hint in the documentation of dragDisable and eachDraggable that draggable="false" is required for text, links and images to disable the default browser behavior?

[phphe]

ok.

[phphe]

added: https://hetree.phphe.com/v2/guide/#draggable-and-droppable

[aimeos]

Thanks! One improvement: For text elements, draggable="false" should be used instead of user-select:none for text elements too