When playing around with Drag & Drop I ran into a misconception in latest Xojo 2015R3:
The Problem:
I’ve build a sample page in http://jakobssystems.net/webapps/test/panelbuilder.cgi
On this page you can drag & drop an instrument from the left side to the right side. This works as intended but you cannot place it where the preview suggest you would place it. Look at the next image:
Here you can see how the Picture is placed on its current X,Y of the Canvas but with its Offset Mouse X,Y of grabbed image.
It only works, if you grab an instrument from the middle on the left.
Conclusion:
You cannot use Drag & Drop Positioning on Pictures because of missing possibilities to get the Offset. Or I am missing something?
Could anyone check this? I’ve tried to cap MouseDown Event but then the Drag is not initialized.
[quote=223028:@Tomas Jakobs]You cannot use Drag & Drop Positioning on Pictures because of missing possibilities to get the Offset. Or I am missing something?
Could anyone check this? I’ve tried to cap MouseDown Event but then the Drag is not initialized.[/quote]
I think you are right in that you can’t currently do what you want.
I have seen “drag” and “drop” as a number of functions:
drag an item and drop it onto / into another item
drag an item within a list to reorder it
drag an item around a page/region to reposition it
drag the edge/handle of an item to resize it
drag files from the user’s desktop into the browser window and drop onto/into an item
At this time, it seems that WE supports #1 only (and not for all items like lists yet)
I think that due to the many forms listed above it’s not surprising that WE doesn’t do all of them (yet) and that some of us are disappointed in that.
That said, I’m confident that items #2-4 can be done in browsers today (using JQuery, Prototype.js, etc) and #5, while possible, is apparently tougher.
I do think we should be more clear about what we want / need and ensure we have feature requests created so we know Xojo realizes that we’re not satisfied yet…
It would be easy to place exactly the picture on the canvas if DragStartX and Y was set properly. Unfortunately using MouseDown or Mousemove on the picture inactivates the drag. It may be possible to use JavaScript to get X and Y upon MouseDown, though.
[quote=223062:@Tomas Jakobs]But this seems to be not possible (yet)
Nah… this is dirty…
My conclusion, I cannot use Drag & Drop for images if the user cannot rely on the preview.[/quote]
JavaScript is not dirty at all. It is like using declares in Desktop. It renders possible what pure Xojo cannot achieve yet. But hey, if you don’t like it, I will stop offering you any workaround using it. Why should I bother ? Be content with your show stoppers
If you want a much more customizable drag/drop you can check out my JqueryUI library. You can make it so you can only drag things on a specific axis or have it drag by a grid unit etc…
I attached the PanelBuilder test project to illustrate the issue.
In the meantime, assuming the user will most often click in the center of the ImageView, Setting DragStartX and DragStartY as half the ImageView Width and Height, respectively, will provide a better result. I verified that the JavaScript onMouseDown event did fire and did not impair the drag, but did not pursue.
Thanks a lot Michel, I wanted to share this here before filing a feedback. It would be great if Xojo could add the origin x and y coords of WebDragItem. I guess I was yesterday a bit frustrated cause got new ideas for features and realized I cannot realize it (yet).
Here is a workaround that will let you get the position of the mouse relative to the webpage when you click the picture.
In the ImageView :
[code]Sub Shown()
Me.AllowPictureDrag(3)
dim js as string
js = js + “posX = 0 ; posY = 0;”
js = js + “document.getElementById(’”+me.controlID+"’).setAttribute(‘onmousemove’,’ posX = event.pageX; posY = event.pageY’);"
js = js + “document.getElementById(’”+me.controlID+"’).setAttribute(‘onmousedown’,‘window.location.replace(""#""+(posX+"“x”"+posY))’);"
self.ExecuteJavaScript(js)
End Sub
[/code]
You get the position of the click relative to the webpage through the Session.HashtagChanged event in the HashTag property, in the form XXXxYYY. Use split on “x” to get each value.
Now all you got to do is to subtract the ImageView Left and Top to get the click relative to the picture.
Note that because the JavaScript mousemove event is client side, it does not have the bad side effects of the Xojo event.
I used HashTagChanged because it is the simplest implementation. If you want, you can use WebSDK’s control Xojo.TriggerServerEvent. But the core of the code remains the same.
My deepest respect and lot of thanks to XOJO Team… with introduction of the latest release (2015R4) and the new properties OriginX and originY Drag & Drop with images now works for the Web… thank you very much!
