The History

While we’ve offered an API to get the Destination of a DragItem, it has been returning Nil on macOS for quite some time. In fact, it likely hasn’t worked since our transition from Carbon to Cocoa way back in the day. Amid all the API changes that came with that transition, DragItem.Destination was unfortunately left behind.

A New Way to FolderItem Drag

To avoid breaking existing code, we chose not to overhaul our entire drag-and-drop system just to support this feature. Instead, we’ve made a few simple additions that are necessary to get FolderItem drags to return a valid DragItem.Destination

Here’s how a FolderItem drag would currently be setup (for example in the DesktopWindow.MouseDown event):

Var fileToCopy As FolderItem = SpecialFolder.Temporary.Child("Test")
Var item As New DragItem(Self, 0, 0, 100, 100)
item.FolderItem = fileToCopy
item.Drag

After dropping the item at its Destination, checking item.Destination would always return Nil:

If item.Destination = Nil Then
    MessageBox "Not a happy destination. 😔"
End If

By making one simple addition and using the RawData API, we can now initiate FolderItem drags in a way that correctly returns a valid FolderItem.Destination.

Var fileToCopy As FolderItem = SpecialFolder.Temporary.Child("Test")
Var item As New DragItem(Self, 0, 0, 100, 100)
item.FolderItem = fileToCopy
item.RawData("public.file-url") = ""
item.Drag

Now, when you check the Destination after the drag is complete, you’ll receive something much more meaningful:

If item.Destination <> Nil And item.Destination IsA FolderItem Then
    MessageBox(FolderItem(item.Destination).NativePath)
End If

An Added Benefit

While this change is a big improvement, why stop there? In the past, you could only drag FolderItems to the Destination, and the entire contents of that FolderItem would be copied over. With the addition of this new dragging method, you can now assign content to RawData("public.file-url"). Instead of copying the entire FolderItem to the Destination, we’ll copy the content from the RawData instead.

Here’s how you could set it up:

// The fileToCopy does not need to exist, we'll simply
// pull the file name from it and create the file at
// the destination with the new content that is assigned
// to the RawData.
Var fileToCopy As FolderItem = SpecialFolder.Temporary.Child("DummyFile.txt")
Var item As New DragItem(Self, 0, 0, 100, 100)
item.FolderItem = fileToCopy
item.RawData("public.file-url") = "Content that will be written to the destination file."
item.Drag

Conclusion

With these enhancements, dragging FolderItems on macOS has become more flexible and powerful than ever. Not only can you now easily retrieve a valid Destination, but you also have the power to control the content being copied, thanks to the integration with the RawData API.

So, go ahead—drag that FolderItem and show us your destination!

William Yu grew up in Canada learning to program BASIC on a Vic-20. He is Xojo’s resident Windows and Linux engineer, among his many other skills. Some may say he has joined the dark side here in the USA, but he will always be a Canadian at heart.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

The End Result

The latest drag and drop example has a functional GUI that looks professional and feels intuitive. All without writing a single line of JavaScript (we will enhance it a bit with some CSS, though).

Please note this is a sample project created to explore drag and drop, not a full featured Kanban board. I’ll omit on purpose things like persistence. The complete project can be found in the Examples section of the IDE, under Platforms > Web.

Let’s walk through how to make it happen.

Creating the Required Components

First, we need to define the building blocks of our Kanban board. In Xojo, WebContainers are perfect for modularizing reusable UI elements. Here’s what we’ll create:

• KanbanCard
  A WebContainer to represent each task card. It’ll have a simple label for the task name (e.g., “Write blog post”) and maybe a colored border or handle to indicate it’s draggable. Add a WebLabel for the text and set its properties in the Inspector to make it visually distinct.
• KanbanCardContainer
  Another WebContainer to act as a column. It’ll hold multiple KanbanCard Containers and serve as both a drag source (where cards come from) and a drop target (where cards land). Include a WebLabel at the top for the column title (e.g., “To Do”) and a rectangular area below it to house the cards.
• Main Page
  A WebPage to host everything. This is where we’ll arrange our columns side by side.

In the Xojo IDE, drag a WebContainer onto your project for the Card, another for the Column, and set up three instances of the Column Container on the main WebPage (“To Do,” “In Progress,” “Done”).

KanbanCard

This component will be pretty easy to build. It is basically a WebRectangle with a WebLabel that we will use for the Title. To make it easier to update, I’ve added a Title Computed Property that will update the TitleLabel if needed.

For the background WebRectangle, we will use the following ColorGroup. Please notice Xojo added support for Named colors, that will rely on the current Bootstrap theme, supporting Dark Mode:

As you can see, BackgroundRectangle and TitleLabel controls are implementing the Opening event. This is just to set the mouse cursor that will be shown when we hover:

Me.Style.Cursor = WebStyle.Cursors.Move

The container itself is also implementing the Opening event. This is to make this control draggable, using the following line of code:

AllowTextDrag(WebDragItem.DragActionTypes.Move)

Any descendant of the WebUIControl class is draggable. And yes, that includes custom controls created with the Web SDK.

For the WebDragItem.DragActionTypes Enumeration, you can choose one these options:

In this case we will only be allowed to “Move” a card from one place to another.

There are cases where it makes sense to support multiple drag action types. In your operating system’s file browser, when you drag and drop files and folders, you can change between Move, Link or Copy by using Keyboard shortcut combinations. Depending on the drag action type, the element will be moved, a symbolic link will be created, or it will be copied, respectively.

Normally you will implement just Move or Copy, but keep in mind it’s possible to have more (at the cost of increasing the learning curve of your application for your users)

Allowing something to be dragged is the first of two steps. You also need a place to drop these items into.

KanbanCardContainer

This container will be more elaborate, but should be easy to follow. Let’s see how it works at runtime, with some annotations:

The WebLabel we used for the Title and the WebButton used for adding new cards are positioned manually in the IDE designer. Same as the invisible WebRectangle holding the KanbanCard items and the KanbanAddCard custom button.

But instead of placing our cards manually, we’ll take advantage of the browser’s capacity for doing this job for us. We just want to add them dynamically at runtime and let the browser stack them vertically, automatically. We also want the browser to display a scrollbar if the columns have several cards.

Here is the code we will add to the WebRectangle:

// Let the framework know we want to let the
// browser place the items automatically
Me.LayoutType = LayoutTypes.Flex

// This style will ensure cards won't be
// placed horizontally by the browser
Me.Style.Value("flex-direction") = "wrap"

// If there are more cards than available
// space, this style will allow the user
// to scroll
Me.Style.Value("overflow") = "auto"

Let’s add some methods to add and remove cards at runtime.

• AddCardWithTitle(title As String)
• AddCardWithTitleAt(title As String, index As Integer)
• RemoveCardAt

Moving Cards Between Columns

Here’s where Xojo’s drag and drop shines. Each Card Container needs to be draggable and each Column Container needs to accept dropped cards. In Xojo:

1. Make Cards Draggable: Open the KanbanListCard in the IDE and implement the Opening event. Enter this code:
   AllowTextDrag(WebDragItem.DragActionTypes.Move)
2. Accept Card Drops: Open the KanbanCardContainer and implement the Opening event. This is the code we need in order to accept drops:
   AcceptTextDrop(WebDragItem.DragActionTypes.Move)
3. Remove from Source: To move (not copy) the card, in the source Column’s DragEnd event, remove the dragged card from its original parent after a successful drop.

With this, you can drag a card from “To Do” to “In Progress,” and it’ll visually jump columns. Xojo handles the heavy lifting. No JavaScript or DOM manipulation needed!

The Hard Part: Reordering Cards

Reordering cards within a column, or dropping a card into another column in a specific position is trickier. You need to detect where the card lands among its siblings and adjust their positions. Xojo’s drag and drop doesn’t natively sort UI elements, so we’ll simulate it.

There are several ways to achieve this, let’s explore some options.

One would be to deal with X/Y coordinates. Once you drop a card, you could take a look to see where the card landed, compare the coordinates with the other cards and reorder them accordingly. In desktop and mobile projects this could be a valid solution. In web projects, dealing with specific coordinates might work, but there are more accurate and easier solutions.

The second way could be good enough in most cases. Cards could also accept drops so, if you drop one card on another, we just have to put the card being dropped in the position where it’s being dropped, and push down the rest of the stack. This way you won’t need to scratch your head and deal with screen coordinates or control dimensions. The end result will be based on this idea.

But what should we do to generate the gap between Cards? Maybe you can create a transparent Container that also accept Card drops, to simulate the gap between cards.

This would work for you, and I honestly recommend you to give it a try, it’s super easy to implement and it will just work. If you don’t want to explore the CSS rabbit hole, that’s fine, this can be your bus stop.

Two downsides:

• You won’t have animations
• You will double the amount of controls on screen (performance may suffer)

I went in another direction though. Using some CSS, you can add and modify margins on the fly, with neat transitions. In my sample project, the margin between cards is managed by the `margin-top` CSS style.

And here is where the Xojo Framework helps. To make styling easier, it adds a CSS class to the element being dragged and also to the element where the mouse is over, when it’s accepting a drop.

dragging – The HTML element being dragged will have this property
dragover – The HTML element under the other element being dragged

In this case, the “Bar” card will receive the dragging CSS class, while “Test #2” will receive the dragover CSS class, while the “Bar” car is above.

I’ve added some transparency to elements with the dragging class. As you can see in the screenshot, the “Bar” Card opacity is set to 30%.

For dragover class, I’ve added some margin and transitions. If you drag something into a card, the top margin will grow, simulating it’s making room for the card you are about to drop.

Here is how the HTML Header section of the sample project looks like. It isn’t too much code, but it does uses some somewhat advanced CSS tricks:

This approach keeps cards neatly stacked and sortable. It’s the “hard part” not because you will have to write a lot of code, but because you’ll actually have to think a solution that won’t require roundtrips between the browser and the server. Xojo’s event system makes it manageable without JavaScript, and with some CSS, the result will be great.

Some CSS Enhancements

In some cases I’m using shadows and border radius using the Bootstrap’s CSS classes.

As you can see, I’m using rounded-2 for the border radius, and shadow-sm to easily add a shadow to the cards.

You can read more about this in the following blog post:
Introducing Named Color and CSS Classes in Xojo Web

There is a related sample project you might want to check:

Closing Thoughts

This has been a fun experiment to explore the Xojo Web drag and drop feature. Give the sample project a try and explore each control to see how it’s been created. I can’t recommend enough that you try to build it from scratch (and ask in the forum if you get stuck!)

We can’t wait to hear about how you plan to introduce drag and drop into your projects. Don’t be shy and create a forum thread to show what you have built, or what you are working on.

Ricardo has always been curious about how things work. Growing up surrounded by computers he became interested in web technologies in the dial-up connections era. Xojo has been his secret weapon and language of preference since 2018. When he’s not online, chances are he will be scuba diving … or crocheting amigurumis. Find Ricardo on Twitter @piradoiv.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube