OnDrag hide or change opacity to 0 in original element like trello does. about blazor-dragdrop HOT 4 CLOSED

Use a custom style for this:

<Dropzone Style="DragDropStyle.Custom">

and add to you site.css e.g.:

 .plk-dd-spacing {
    height: 10px;
}

 .plk-dd-spacing-dragged-over {
    padding: 25px;
}

.plk-dd-dragged-over  {
    background-color: lightgray;
    opacity: 0.6;
    animation: blinker 1s linear infinite;
}

 .plk-dd-dragged-over > div {
    background-color: lightgray;
    opacity: 0.6;
    animation: blinker 1s linear infinite;
}

.blink_me {
    animation: blinker 1s linear infinite;
}

 .plk-dd-in-transit {
    opacity: 0
}

.plk-dd-in-transit > div {
    opacity: 0
}

from blazor-dragdrop.

@Postlagerkarte I tryed this initially, but the style from the in-transit apply to both 'visual elements', the div that stays on original place and the one dragged.

see this post as a reference: https://stackoverflow.com/a/62790549/1546943

The key point is to listening to the drag event, instead of the dragstart.

PS; im asking for this cause for the user, sounds more 'natural' to see the original element disapear while dragging.

from blazor-dragdrop.

@michelkommers thank you for contributing!

I just tried with the custom style from above and it looks like the original element is getting the zero opacity while the dragged element is not.

You can see it more clearly if you use

.plk-dd-in-transit {
border: 5px solid red;
}

.plk-dd-in-transit > div {
border: 5px solid red;
}

I agree that it looks more 'natural' to see the original element disapear while dragging.

from blazor-dragdrop.

@Postlagerkarte thanks for the reply.

Here is applying to both, i will look in to my code, maybe something is conflicting, dont no.
Thanks

from blazor-dragdrop.