How to make my Icons Draggable

[JackTelford]

Hi Dustin I have made some new Apps in the Components But I am unable to get my Icons to Drag across the desktop is there anything you could point me at to get this to work?

[DustinBrett]

Hi, could you clarify what you mean by your icons? You should be able to move icons on the desktop. I tested now and that functionality in general is not broken. But it might depend what you want to drag where and how those icons were made.

[JackTelford]

Hey Dustin Sorry for the late response and thank you for responding. In the new Component I can not seem to use the Built in Drag Feature.

import Draggable from "react-draggable";

        <div>
          <IconContainer
            onDoubleClick={handleIconDoubleClick}
          >
            <EmailIcon src="/System/Icons/16x16/outlookemail.png" alt="Email" />
            <span>Email</span>
          </IconContainer>
        </div>
      </Draggable> ```
Could I ask what I am missing? I am able to move the Icon but after I can not open the Email form.

[DustinBrett]

Oh I see, you are making something quite custom.

The drag/drop feature is exclusive to FileManager & the Window components currently. I think you need to program quite a bit for it to drag the way you want. Your code is not a normal use case that I support with the code as is. I would need to see all of your code to help more but at the same time if you want something this custom you will need to think outside the daedalOS box because that is not something I support currently.

You probably would need your own drag/drop event handlers. I don't even use react-draggable's Draggable component, I use Rnd from react-rnd which internally uses react-draggable. I also make use of the native HTML drag and drop features with event handlers like onDragStart, onDragOver, onDragEnter, onDragLeave, onDragEnd & onDrop.

You might be able to make use of useDraggableEntries or useDraggable, but those hooks are custom made for the components they are used in.

If you aren't able to figure it out I would need quite a bit more information, like perhaps a link to your source code on GitHub with the relevant changes as well as a video or pictures explaining your expectations for your changes.

[JackTelford]

https://github.com/JackTelford/RDIAgentTesting/tree/main/components/apps/Email

I have tried many ways so I hope you can find something that works for me Thank you for your help.

I did not Push all the ways I have tried to insure not to break my code.

[JackTelford]

Maybe a better Question How can I get my Icons integrated like you have them?

[DustinBrett]

If you just want an icon of your app on the desktop, you need to add the app to the directory and then make a shortcut for it.

https://github.com/DustinBrett/daedalOS/blob/main/contexts/process/directory.ts

Email: {
  Component: dynamic(() => import("components/apps/Email")),
  icon: "/System/Icons/outlookemail.png",
  title: "Email",
},

Then make the shortcut file in public/Users/Public/Desktop and name it something like Email.url

[InternetShortcut]
BaseURL=Email
IconFile=/System/Icons/outlookemail.png

Try that and see how it goes. I can't think of any other needed steps at the moment.