Shopify / draggable

The JavaScript Drag & Drop library your grandparents warned you about.
https://shopify.github.io/draggable
MIT License
17.93k stars 1.09k forks source link

Option to set width/height to offsetWidth/Height on drag start #599

Closed CoenraadS closed 8 months ago

CoenraadS commented 8 months ago

Please use this template to help contributors get a detailed description of the issue or feature.

For support questions, please use stackoverflow. This repository's issues are reserved for feature requests and bug reports.

1. Apply either the bug or feature-request label

Feature

2. Describe the bug or feature

When dragging dynamically sized elements, I want the drag element to have the same size.

To do this, I set the e.source.style.width & height in the drag start event.

However, due to the original element being display:none, it is no longer possible to get the offset width/height via the dragEvent.originalSource

I would like it if the offsetWidth & offsetHeight could be made available in the drag start event, as captured before the element was hidden. Or an option 'useOffsetSize' to automatically do this for me.

4. Please tell us about your environment:

Example:

index.zip

See index.html:51-58 for my current workaround

CoenraadS commented 8 months ago

Solved via:

const draggable = new Draggable(document.querySelectorAll('.slots'), {
    draggable: '.slot',
    mirror:
    {
        constrainDimensions: true
    }
  });