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

Question: Motivation for cloning "originalSource" #242

Open
stkao05 opened this issue Jun 27, 2018 · 6 comments
Open

Question: Motivation for cloning "originalSource" #242

stkao05 opened this issue Jun 27, 2018 · 6 comments
Labels
question curious about something and just want to ask

Comments

@stkao05
Copy link

stkao05 commented Jun 27, 2018

When an element gets dragged, a clone of the element is created and also the original element will get hidden. Just curious about the motivation for such a behavior 🙂

(For my specific use case... this behavior a bit undesirable, but not really a major issue)

@stkao05 stkao05 changed the title Motivation for cloning "originalSource" Question: Motivation for cloning "originalSource" Jun 27, 2018
@beefchimi
Copy link
Contributor

@stkao05 what is the exact behaviour that you need?

As of the latest pushes to master, we have made it so the mirror has been abstracted a bit more. You can now initialize draggable without any mirror.

As for cloning behaviour - the reason why we have a source vs originalSource is because of what happens with touch events. Since draggable items are being moved around in the DOM as you drag, that means the original element that you have initiated the event on has been changed in some way (example: removed and reappended to the dom). This just won't fly sadly - so:

  • on drag:start, hide the originalSource and leave it in place in the DOM
  • duplicate the originalSource as source and append it next to originalSource
  • now start moving this new source around in the DOM
    • changes happen to source while originalSource can retain the original eventListener
  • on drag:stop, remove the cloned source and replace it with the originalSource

Does that make sense? Please let me know if you need more clarity.

@tsov in case you have a better description.

@beefchimi beefchimi added the question curious about something and just want to ask label Jun 27, 2018
@stkao05
Copy link
Author

stkao05 commented Jun 28, 2018

Thanks for the detail explanation @beefchimi 🙂Glad to see the library is still in active development.

Sorry, I am still trying to wrap my head around it. Yes, the original draggable item could be changed in some way during the drag-and-drop process, but I wasn't sure why would that be an issue?

@beefchimi
Copy link
Contributor

^ @tsov was there anything you wanted to add here?

@tsov
Copy link
Member

tsov commented Jul 29, 2018

@beefchimi you got it 👍

We should really file an issue about this, this always sounded like a browser bug to me!

@seanogdev
Copy link

Would there be a side-effect to removing the style attributes which hides the original? The reason I want it is that I want to display the original until I drop the element to its new position. Or is there a more idiomatic way of achieving this?

@zjffun
Copy link
Contributor

zjffun commented Jan 9, 2021

Would there be a side-effect to removing the style attributes which hides the original? The reason I want it is that I want to display the original until I drop the element to its new position. Or is there a more idiomatic way of achieving this?

Hi @miralize , If removing the display: none of the originalSource, it will also act as a draggable element and move over it will trigger drag:over.
It seems that clone an originalSource again and remove the draggable class of it can avoid treating it as a draggable element.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question curious about something and just want to ask
Projects
None yet
Development

No branches or pull requests

5 participants