Web Control Drag

Is it possible in a web app to drag a control (like a text area control) to a different position on the page? I currently drag data, but I’ve never dragged and dropped an actual control before.

Yes

heh, I’d also like to see some examples of this :wink: I imagine it will require some javascript on the browser side to do the movement and then an event callback to the program to say where it was dropped and to then set the position and or size of the control in xojo so that the framework knows where the control is now. And of course anything you need to do to save and restore those values.

I’ve tried experimenting with some of the HTML5 drag and drop stuff with execute javascript, but it wasn’t quite as simple as setting the property to true on the dom object that said it was draggable and I never went beyond that.

I had also considered using the new built in drag and drop stuff to fake it out, let the base window accept the drag and drop event and just move the control but haven’t dived in to do so yet.

[quote=341295:@James Sentman]heh, I’d also like to see some examples of this :wink: I imagine it will require some javascript on the browser side to do the movement and then an event callback to the program to say where it was dropped and to then set the position and or size of the control in xojo so that the framework knows where the control is now. And of course anything you need to do to save and restore those values.

I’ve tried experimenting with some of the HTML5 drag and drop stuff with execute javascript, but it wasn’t quite as simple as setting the property to true on the dom object that said it was draggable and I never went beyond that.

I had also considered using the new built in drag and drop stuff to fake it out, let the base window accept the drag and drop event and just move the control but haven’t dived in to do so yet.[/quote]
Having written our web drag and drop implementation, I can tell you that it’s definitely not as easy as it seems it should be.

The biggest issue you’ll have is that the browsers implement things so differently. Some automatically create drag previews while others do not. Some use the standard action values (Copy, Move, Link, CopyMove, CopyLink, All or None) while others ignore certain combinations. Some allow you to distinguish different types of drags based on MIME types while others do not. This is even true within the same product line ( yeah, I’m talkin’ to you Microsoft ). The newest browsers have largely converged on a common implementation, but the real-world scenario is that most users are not running the latest-greatest version of their primary OS or browser and they either won’t or can’t upgrade. If you want a truly good experience for everyone, you need to plan for all of that.

The really sad part of all this is that the HTML5 Drag and Drop spec was largely influenced by Microsoft’s original spec that they used for IE6 when they did the original design for Outlook online.

I am curious though… what’s the real-world use-case for being able to drag controls?

The analogy would be repositioning notecards or drawings on a cork board for storyboard outlines for movies or tv. If it was online, then multiple people could collaborate on the story.

It sounds like it could be very difficult with the different implementations. Perhaps it would be easier to write a desktop app with drag and drop and just stores it’s data online.

The main problem I’ve found with a desktop app/server type of setup is keeping everybody on the current version of the software. Once I converted the main app I sell to Xojo web, it completely eliminated that entire headache from my life.

For me I’d like to be able to drag and drop edit a dynamically created interface on the web page. It’s made up of many embedded container controls that the user can add and edit and setup. There is a full featured editor in the program and you can edit a “view” into the app there and display it on a web page, but you can also edit them and create them on the web page itself which is a real pain right now. I’m just using arrow keys to move things around and resize them. That works fine when there are only a few controls but when your pages get larger it’s kind of a mess to work with it on the web itself :wink: Here’s some examples from my own system :slight_smile:

https://www.dropbox.com/s/zkplb1v2rs6ux0u/webInterfaceExample.png?dl=0
https://www.dropbox.com/s/t6bk5zlyvgwsy0k/webInterfaceExampleHVAC.png?dl=0

I’ve written several custom controls for that app and so I am in full sympathy of trying to get anything working across many types and versions of browsers! For my own implementation barring anything coming from you folks ;), will be just to write a custom control that creates a div for the drag event that takes a preview picture that I will send it and then lock it to the mouse until you mousedown which will trigger a server event with the new location or size. I think i can do that to work cross platform without too much pain.

Well, what you could do is put a WebCanvas behind all of your controls as the WebDrag receiver and then make sure all of your “controls” are WebContainers. If you look at the Web Drag and Drop example, it shows how to drag containers, and the DropObject event includes an x & y coordinate of where the item was dropped.

What you can’t do is get any sort of elaborate drag interaction because of the round-trip latency. Any processing has to be done only on the browser, which is why we don’t have events that fire during the drag in web projects.

yes, that was my first thought to use the new built in stuff… Perhaps I will experiment with that sooner rather than later. Thank you!