Skip to content
This repository was archived by the owner on Mar 10, 2024. It is now read-only.
This repository was archived by the owner on Mar 10, 2024. It is now read-only.

Needs offset for drag image when using dnd-handle #238

@thenetsmith

Description

@thenetsmith

When using a child element as dnd-handle, the LI drag image is created with an offset of (0, 0), resulting in the upper-left corner of the drag image being positioned under the current location of the cursor. This is not a big deal if the drag handle appears on the LHS of the LI to be dragged (as in the "Item Types" demo). However, if the drag handle is positioned on the RHS of a LI that is wide and short, the left edge of the drag image will appear under the cursor with the rest of the drag image out to the right. This can result in much of the drag image being out of view of the client area, causing the user to want to drag left, left, left, until the drag image is entirely visible.

The attached image illustrates this point. The dnd-handle element has a red circle around it. A drag operation was just begun using one of the handles, and the drag image is mostly non-visible to the right.

dnd-with-handle-on-right-1

I have modified (locally) the function that executes when the dragstart event is fired (in the dndDraggable directive), passing the mouse coordinates relative to the LI origin to event.dataTransfer.setDragImage, and it works well in my scenario -- closely approximating the same visual behavior I have observed when dragging the LI without a dnd-handle.

I would like to submit a pull request to share these changes.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions