Skip to content
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

Feature: add support for dragover/mouseover events, doing something with mouseposition #201

Open
Evertvdw opened this issue Oct 7, 2021 · 0 comments

Comments

@Evertvdw
Copy link

Evertvdw commented Oct 7, 2021

Hello! I've been struggling for quite some hours to get something done with this library which should in my opinion be easier. I eventually found a workaround, so this issue is also for those with similar use cases.

The use case

I have a tree with rows which can be collapsed/expanded and I wanted to be able to reorder that tree, move children around etc. This means that at a give position in the list there are multiple options for the item to go. For example take this tree:

a
    b
    c
        d
e

When I drag b between d and e I have multiple options:

  • B should become a child of d
  • B should become a child of c
  • B should become a child of a
  • B should become a root element between a and e

What I wanted to do to solve this is:

  1. At the start of dragging take the clientX position of the mouse and save it
  2. While dragging compare the current clientX position of the mouse and when take the offset of this do determine what option to select.

Current solution

For the 1st step I added a @mousedown handler to the drag-handle of the draggable items. In this handler I extract the mouse clientX and save it.
For the 2nd step I had to do this in the @drop-ready handler of the container:

const element = document.querySelector(".smooth-dnd-drop-preview-constant-class");
if (element && !this.dragListener) {
    element.addEventListener("mousemove", (e) => {
        this.dragOver(e as MouseEvent);
    });
    element.addEventListener("touchmove", (e) => {
        this.dragOver(e as TouchEvent);
    });
    this.dragListener = true;
}

In addition to this I had to add custom css:

.smooth-dnd-drop-preview-constant-class {
	pointer-events: all !important;
}

Preferred solution

It would be nice if there would be a better way to get the current mouse position while dragging. With HTML dnd you can set dragover listeners to elements that fire when moving the mouse. I tried to add those everywhere but I could not get that to work. Like to hear your thoughts on this, is this workaround acceptable?

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

1 participant