Brand new drag and drop component

[psDevUK]

Greetings all UniversalDashboard users

These have proved tough-times for everybody, so I am asking for you the community to show some and give this component some likes before it will be released
Very lucky having been on this forum since it began I have linked up with some super-cool dashboard users. So I would like to give @BoSen29 some respect for helping me out on this mini-project.

What is it?

Quite simply it is a drag-and-drop component for universaldashboard

I have embedded a styled DIV component to accept nesting any UD component inside it.

How easy is it to use?

Very simple:-

        New-UDDrag -Id "DragQueen" -Title "New-UDDrag" -Content {
            New-UDCard -Title "Awesome Component" -Content {
                New-UDHeading -Size 5 -Text "Drag things with style"
                New-UDImage -Url "https://raw.githubusercontent.com/psDevUK/UD-Drag/master/Capture.PNG"
            }
        }

How do I get it?

By giving this page a like…once enough likes received a link will be revealed

Update

Wow some tough cookies to please in the lockdown situation…still waiting to get to double figure likes…come on peeps…

So whilst waiting for the likes to come flooding in…I have put together a fancy looking resizable card here is a simple demo…

I will plonk this on the marketplace soon to hopefully get the likes rolling in for the dnd component
https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.UDWindowUI

[BoSen29]

@psDevUK rasing drag to a whole new level.

Kudos my man!

[insomniacc]

Good stuff chaps!

[psDevUK]

Thanks @insomniacc for the like we are actually looking on developing this a bit more, I can’t release too much details but I have also asked @augustin.ziegler as well as @BoSen29 for additional input. So hopefully soon the 3 amigos will have something new for the community to play with, to enable easy drag-n-drop on any component, plus some other features…I need to make sure I do some proper testing hence the extra people for ideas and support is appreciated.
Here is an updated preview of this component in action:-

[psDevUK]

Officially released to the UniversalDashboard MarketPlace

What have you gone and done…?

Well what started as a basic movable DIV tag has now evolved to something much bigger and greater. Just have a look from top to bottom of this post to see how this component evolved. I am combining three yes three different components to bring you

New-UDResizeWindow

Where can I download this…?

https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.UDResizeWindow

Where is the README dude…?

It does appear on the marketplace, but the official readme is on the repo for this project which is located here:- https://github.com/psDevUK/New-UDResizeWindow/blob/master/README.md

Why did you do this…?

Well I am always up for bringing new components to the amazing world of UniversalDashboard and I stumbled across what appears to be the most downloaded component right now https://www.npmjs.com/package/react-draggable and then I managed to integrate the resize handles which is another component to resize the window manually, and then added the last component which was to show or hide the window, giving you the two buttons across the top. I wanted to get the blessing of @adam as this is kind of giving some of the functionality that is only available in Enterprise edition…I just hope all the people who use this software for free will eventually buy the project and show the proper respect the developer is due

How did you do it…?

As I say to everyone who asks just watch the youtube video @adam done on creating custom components, watch it enough times and it will make sense I was also very lucky to be shown the light by @BoSen29 who shared a very handy link which enabled me to imbed UniversalDashboard components inside the window via the -Content scriptblock parameter

Any Questions…?

Please just ask and I will be happy to assist best I can

The Battle Off

So out of this component @BoSen29 actually developed his own component! So this is a double-whammy of components, both Window components, but unique in there own way…so hopefully my fellow good friend @BoSen29 will update this post with his component

Thanks for reading

If you got this far well done. and thanks for reading

[BoSen29]

Thanks for the fun project @psDevUK!

Your markdown skillz are truly remarkable, I’ll try to follow up with my version of the same react-component.

The vision

Movable windows, with a task-bar at the bottom.

The … actual stuff:

Install-Module UniversalDashboard.UDWindow

See

BoSen29/UDWindow

See the github pages for examples and a proper readme.md

[DavidB]

thats super cool. I’m trying to build a react drag and drop list, before I carry on hacking away, you havent done one already have you?

[psDevUK]

Hi @DavidB all the components I have built I have placed onto https://marketplace.universaldashboard.io/ if you just search for psdevuk you will see all listed. If you know of a component that you want making then post a link
Do you mean something like this:- https://www.npmjs.com/package/react-beautiful-dnd
This one looks like would build in no time:- https://www.npmjs.com/package/react-sortable-list

[DavidB]

I’ll have a look at those!
Yes I want to use the react-beautiful-dnd and then build something like this, which allows me to drag items from one list to another. https://codesandbox.io/s/ql08j35j3q?file=/index.js

I managed to get the react-sortable-list done, so I’ll look at the more tricky options now