Xojo Documentation Xojo Documentation

Web pages can have controls that can be dragged onto other controls. You do this using the methods and events on WebControl in conjunction with the WebDragItem class.

Supported Controls

These are the controls that can be dragged:

• WebLabel
• WebLink
• WebContainer
• WebImageView
• WebRectangle
• WebCanvas
• WebControlWrapper

These are the controls that can have another control dropped on them:

• WebTextField
• WebTextArea
• WebSearchField
• WebLabel
• WebLink
• WebContainer
• WebImageView
• WebRectangle
• WebCanvas
• WebControlWrapper

If you try to use drag and drop with a control that does not support it, a message is written to the console (and displayed in the Messages panel).

Dragging a Control

To allow a control to be dragged, you call one of the Allow methods on the control, typically in the Shown event handler. A control can support dragging of pictures, text and any raw data. This code enables text dragging for a label:

Me.AllowTextDrag(WebDragItem.DragActionCopy)

The parameter specifies the type of drag. There are several types on the WebDragItemClass: DragActionCopy, DragActionMove, DragActionLink. These types do not cause the drag to work differently but you can check the type when the drop occurs to do a specific action. The type you choose does change the type of cursor the browser displays for the drag. As example, if you used DragActionMove, you may want the control accepting the drop to hide the original control so it cannot be dragged again.

You should only specify a single drag type on the source control. This specifies the control can be dragged as a copy:

Me.AllowTextDrag(WebDragItem.DragActionCopy)

Dragging controls around the page by is not useful by itself. You'll also want to allow the controls to be dropped onto other controls. You do this by calling the Accept methods for the control, again typically in the Shown event handler. A drop can support 1 or more drag types. This code allows a copy or move drop to occur on a text area:

Me.AcceptTextDrop(WebDragItem.DragActionCopy + WebDragItem.DragActionMove)

Now when the control is dragged, you will be able to drop it onto this text area. When you do so, it calls the DropObject event handler for the text area (or whatever control you are using). This event provides you with the WebDragItem which contains information about the control that was dropped.

Web Drag & Drop

Example Projects

Xojo includes two examples to help you see how Web Drag & Drop works:

• Examples/Web/Drag and Drop/SimpleDragAndDrop
• Examples/Web/Drag and Drop/DragTest

See Also

WebDragItem class; UserGuide:Web UI topic