Skip to content

[Bug] Dragging possible even if disabled #150

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
aimeos opened this issue Mar 24, 2025 · 9 comments
Closed

[Bug] Dragging possible even if disabled #150

aimeos opened this issue Mar 24, 2025 · 9 comments

Comments

@aimeos
Copy link

aimeos commented Mar 24, 2025

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
Copy link
Owner

phphe commented Mar 24, 2025

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
Copy link
Author

aimeos commented Mar 24, 2025

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
Copy link
Owner

phphe commented Mar 24, 2025

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

@aimeos
Copy link
Author

aimeos commented Mar 28, 2025

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
Copy link
Owner

phphe commented Mar 28, 2025

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

@aimeos
Copy link
Author

aimeos commented Mar 28, 2025

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
Copy link
Owner

phphe commented Mar 28, 2025

ok.

@phphe
Copy link
Owner

phphe commented Apr 15, 2025

@phphe phphe closed this as completed Apr 15, 2025
@aimeos
Copy link
Author

aimeos commented Apr 15, 2025

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants