How do I move a picture (imagewell), around in my web app ?
the examples for drag & drop, only moves the data, but I want the imagewell, to move to a new position using a mouse.
I want to do this for the customer to place a symbol over a picture, and to use this WYSIWYG way, I need to let the user use his mouse to move that symobl around over a picture…
I have checked with tranparent PNG over other picture,and that is okay, now I only need to be able to use a mouse to move it…
I could use sliders for x, y but a mouse directly would be nicer. Possible ?
cheers Helge
Adding that to a imagewell in its open event does not make it possible to use the mouse to move it…
into open event:
me.AllowPictureDrag(WebDragItem.DragActionMove)
It works on a rectangle, but not on a Imagewell…
What you want to do is possible in JavaScript.
That might be a problem, as I have never used JavaScript in Xojo…
Not possible without ?
I am afraid not. Xojo Web does not provide a way to know where the cursor is, so Javascript is needed for that.
And even with that data, positioning the picture could not be done server side (in Xojo), because of the time it takes for a round trip between the browser and the server. This has to be done client side for smooth operation.
There was a very long thread about the logic involved, where you may find some useful code :
https://forum.xojo.com/947-we-drag-and-drop-files-into-webpage/33
you can write a small control which uses the xojo webcontrol sdk to send the curser postion to the webserver. you can also use a library like jQuery to achive this faster.
Hi Helge,
you can move a picture around using a mouse without javascript and WebSDK simply using a WebContainer and drag events.
There are many ways to display a picture as described in this post resizing a web image without redrawing.
You can use the CSS background property to display an image in an empty webcontainer in a more advanced way when compared to an imageweel: scaling, rotating and many other effects can be controlled using CSS styles and all of them are performed by the browser itself.
The webcontainer is also more flexible on drag events than an imagewell: use a webcontainer as a blackboard with its background image and another webcontainer as the other image to move around your blackboard using the mouse.
If you use a webcontainer with background image property and drag events you can reach your goal.
It’s not difficult: all can be done using pure Xojo code and the browser handle the image movement for you.
Remember that the drag event reports all the properties required to determine what was moved and where the movement stopped: you must simply track source and destination points.
Regards.