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?
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.
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.
Events
DropObject(obj as WebDragItem, Action as Integer) - Fires after the user releases a dragitem over a control which can accept the drop.
Properties
DragOverStyle - WebStyle to apply when a receiving control can accept the currently dragged item
[h]WebDragItem[/h] Constants
DragActionNone = 0
DragActionCopy = 1
DragActionMove = 2
DragActionLink = 4
DragActionUnknown = 8
DragActionAll = 15
Methods
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.
Properties
Sender as WebControl - The control from which the item was dragged
Tag as Variant - The tag which indicates the specific item which was dragged
[h]Notes[/h]
Internet Explorer 9 does not provide drag previews, although the correct cursor will appear.
Some older browsers do not support Raw Data drags.
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
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.
