How to show outline of item being dragged?

[sam-wheat]

Firstly, thank you for this nice library!

Seems I have everything working except then animation when I drag an item. When dragging, the cursor turns to a pointer with plus sign and items under the cursor move apart. However I do not see the animation of the item being dragged.

I copy/pasted dragdrop.css into my app and also the flex-item and flex-container classes from the flex page in the demo app.

Here is the dropzone:

<div class="plk-flex">
    <Dropzone Items="Dimensions" Class="flex-container" ItemWrapperClass="@(item => "flex-item")">

        <div>
            @context.DisplayValue
        </div>

    </Dropzone>
</div>

How might I troubleshoot this issue? Am I missing a script? My app is WASM not Blazor Server - does that make a difference?

Thank you.

[sam-wheat]

I created two test projects, one WASM one server - the animation issue is easily reproducible in the WASM project by just copying over from the demo project. Server project works fine however. Is this some kind of Blazor limitation? If it is a CSS animation I don't understand why it would be a factor.

[sam-wheat]

After investigating this a bit I think what I wrote above is exactly backwards: Server project is not working WASM project is working. I say this because the css for the demo includes this class

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

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

In the WASM project when an item is dragged the above class is applied which explains why the dragged item is not visible. It's working as it should.

In the server project, browser tools will tell you above class is effective however the item being dragged is still visible. I suspect that javascript is starting the drag operation and creating the ghost image prior to making a server call which subsequently enables the plk-dd-in-transit class. I am just speculating here - if anyone reads this and can add some clarity please do.

[Norsotec]

i run into the same problem. did you ever got any response of the developer?

and more important: have you found any solution on it till now?

[sam-wheat]

Sorry, no.

---

From: Thomas Norek @.> Sent: Friday, February 25, 2022 1:01 PM To: Postlagerkarte/blazor-dragdrop @.> Cc: Sam Wheat @.>; Author @.> Subject: Re: [Postlagerkarte/blazor-dragdrop] How to show outline of item being dragged? (#126)

i run into the same problem. did you ever got any response of the developer?

— Reply to this email directly, view it on GitHubhttps://github.com/Postlagerkarte/blazor-dragdrop/issues/126#issuecomment-1051264022, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AEA2LWSUD6OOKHCOABDIGATU47UZNANCNFSM5FNH3BSA. Triage notifications on the go with GitHub Mobile for iOShttps://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Androidhttps://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub. You are receiving this because you authored the thread.Message ID: @.***>