Xojo Web: Drag & Drop

Hi everyone! In this video I’m going to show you how to
use drag & drop in your Xojo web apps. Start by creating a Xojo web project. Now the first thing I want to do is to add
a couple images to the project so that I can have these show on the web page to drag around. I’ll drag a couple images I have here into
the project. Now on the WebPage I want to display these
images so that they can be dragged. So I’m going to put a couple ImageWells on
there. I also am going to add a label to show how
text can be dragged. And then I’m going to add a Canvas that will
show what gets dragged onto it, either the image or the label text. I’ll just re-position and line up everything
here so that it all fits and looks good. Now we can add some code. So the first thing I want to do is tell the
label that it can be dragged. So in the Open event handler I will call the
AllowTextDrag method and tell it I want the text to be copied so it will stay where it
is. And then on the ImageViews I want to do something
similarly except I want to use the AllowPictureDrag method. I’ll put that on both of them. Now on the Canvas we need a few events. So I’m going to start with the DropObject
event. That will be called when something is actually
dropped onto the Canvas. And the Paint event will draw what we dropped. And the Shown event will set it up to accept
drops. So here in the Shown event we’ll add the code
to accept both a picture and text drops. And then before we move on to the next event
I need a couple properties. So I’m going to have a DropPic property. That’ll be a picture and that will save the
picture that’s dropped onto the Canvas so it can be drawn later in the Paint event. And then I’m also going to have a DropText
property and that’ll save the label text that’s dropped onto the Canvas so it can be drawn
in the Paint event. Now in the DropObject event I can check the
type of the sender. That’s the object (obj). And if it’s a WebImageView I’ll grab its picture
and save it in the property. If it’s a label I’ll grab the text and save
it in the corresponding property. And then I tell the Canvas to redraw itself. That ends up in the Paint event being called. And in there I check if there’s a picture
value. If so I draw it. If there’s a text value I draw that. And then you just draw a border around the
Canvas so you can see where it is on the web page. Now I can run the project and test it out. You see it shows our images and the text and
the border around the Canvas. I’m not able to drag, though. That’s weird. I can drag the text. So I can’t drag the images. So obviously we have something we need to
check in our project. So let’s go back and take a quick peek at
that. So we’ll go back to the project and I’m going
to bring up the WebPage. And if I look at the properties for the images
you can see Ieft the ProtectImage setting turned ON. I need to turn that OFF. When ProtectImage is ON it means you can’t
modify the image, copy it, drag it and any of that sort of thing. So with it off I expect the things will work
how we want. So now I can click on an image and I can drag
it onto the Canvas and it gets drawn in there. I can drag the text; it also gets drawn. And the other image will replace the one that
was there before. So that’s it. That’s how you can use drag & drop in your
Xojo web applications.

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *