web drag problem

In an app I have, I allow users to drag web containers around the screen and drop them where they want. To save bandwidth, the containers don’t move as the mouse is moved. They only move once the mouseup even happens. That process works fine. The problem is that on some browsers, the act of dragging causes any text in the area to be selected (highlighted). It doesn’t prevent the drag operation from working, but it sure looks bad. Of the browsers I’ve tested, this highlighted text occurs on Internet Explorer (and the new Microsoft Edge), as well as Firefox. Chrome and Opera don’t do this highlighting. I’m currently using Windows 10, but the same thing happens on Windows 8 as well.

Is there any way to block this text highlighting during a drag operation?

if you’re using custom code, there are css styles that you can apply which can stop selection.

I assume this isn’t just a problem for me. Isn’t this a problem for everyone who is using drag functions in a web application?

We specifically solved this in our built-in drag solution.

Greg, I assume you mean using webdragitem, acceptpicturedrop, etc. I have been looking through the documentation on these functions and it seems a bit sparse. For example, the documentation lists webcontrol.acceptpicturedrop but doesn’t say anything about it. Webcontrol.allowpicturedrag says it takes a parameter of allowedactions but doesn’t say what the possibilities for the parameter are. Is there any more extensive documentation or examples?

What I’m trying to do in my app is create a simulated desktop environment where multiple windows (webcontainers) are shown and can be moved around, resized, brought to the front, etc., of a single underlying webpage. I’m doing the drag functionality by having a label at the top of each form which can be clicked and dragged. When the mouse button is released, the webcontainer moves however much the mouse cursor has been moved. I don’t know whether the webdragitem and acceptdrop stuff would necessarily work for this since when moving a webcontainer, depending on how it was moved it might be “dropped” onto the underlying webpage, or dropped onto another webcontainer, or even dropped onto itself even though the point really is just to move the webcontainer rather than to drop it specifically onto another control. The system I am using now does work, except the pesky text selection problem, but if they built-in system would work I think it would probably be preferable.

First of all, I’ve asked Paul to get the docs up on the site for you.

As far as the built-in dnd framework goes, it really is a “drag from this control to that control” system. You can drag between container controls of you want.

If you want to see it in action, there are two example projects in the Examples/Web/Drag and Drop folder.

Methods for Source Controls

  • WebControl.AllowPictureDrag(AllowedActions as Integer) - Tell the source control to allow Picture drags.
  • WebControl.AllowTextDrag(AllowedActions as Integer) - Tell the source control to allow Text drags.
  • WebControl.AllowRawDataDrag(AllowedActions as Integer, MimeType as String) - Tell the source control to allow Raw Data drags of the specified mime type.

Methods for Destination Controls

  • WebControl.AcceptPictureDrop(AcceptedActions as Integer) - Tell the receiving control to accept Picture drops.
  • WebControl.AcceptTextDrop(AcceptedActions as Integer) - Tell the receiving control to accept Text drops.
  • WebControl.AcceptRawDataDrop(AcceptedActions as Integer, MimeType as String) - Tell the receiving control to accept Raw Data drops of the specified mime type.

• DropObject(obj as WebDragItem, Action as Integer) - Fires after the user releases a dragitem over a control which can accept the drop.

• DragOverStyle - WebStyle to apply when a receiving control can accept the currently dragged item


  • DragActionNone = 0
  • DragActionCopy = 1
  • DragActionMove = 2
  • DragActionLink = 4
  • DragActionUnknown = 8
  • DragActionAll = 15


  • Picture() as Picture - The picture which was dragged. This value will be Nil if no picture was dragged.
  • PictureAvailable() as Boolean - Returns True if a picture object is associated with the WebDragItem
  • RawData(MimeType as String) as Variant - Returns an object associated with the WebDragItem.
  • Text() as String = The text which was dragged. This value will be empty if the WebDragItem contains no text
  • TextAvailable() as Boolean - Returns True if a the WebDragItem contains text.


  • Sender as WebControl - The control from which the item was dragged
  • Tag as Variant - The tag which indicates the specific item which was dragged


  • Internet Explorer 9 does not provide drag previews, although the correct cursor will appear.
  • Some older browsers do not support Raw Data drags.

@Greg O’Lone Nice job done, works great!

Having built my own previous to the arrival of the built-in solution, I can attest indeed Greg has achieved a feast of engineering.

Sorry but Web Drag & Drop is not useable for pictures at least for me when no X and Y coordinates are captured. I’ve made a sample to demo the effect: https://forum.xojo.com/26982-2015r3-web-drag-drag-misconception

That does not preclude in any way the very real accomplishment that drag and drop represents. You may not fully realize the complexity.

Greg is now aware of the necessity to provide click coordinates. I am sure he will get to it.

BTW I am posting a workaround in the other thread. So the issue is not as terrible as it looks.

To be honest, the primary design for drag and drop was to allow dragging from one control to another, and it does that very well across our supported browsers.

You should also note that the origin coordinates case has been marked fixed for a future release.

you should also note that the origin coordinates case has been marked fixed for a future release.

This is good news… thank you very much. As said not suitable for my specific demands. This does not mean that this is not suitable for others as we already discussed before. There are lot of Drag & Drop applicable scenarios. Looking forward…

Customers are nasty sometimes, you give them one function (Drag & Drop)… and they start demanding more :wink:

Is it possible to drag an object from one point on its parent object to another point on the same parent object? On the simple drag and drop example from xojo, I set the web page itself to accept drops and then tried dragging the various items from one place to another on the page. The dropobject event of the webpage never seemed to fire. Being able to drag an item from one spot on a parent to another spot on a parent would be really helpful for allowing object positioning.

You can do this by putting a completely empty webcontainer on the page to act as a drag receiver, and then in the DropObject event something like this:

obj.Sender.Left = x obj.Sender.top = y

This’ll work better once the origin coordinates case makes it to you guys.