WE drag and drop files into webpage

No. We tell the browser to do the calculation. We can’t tell on the server side how the browser has rendered the listbox, at least not synchronously, so even if we did expose it to you, the value would be potentially stale by the time you had access to it (like if the user resized their page).

Perhaps. That would make a good feature request.

Usually what I’ve seen people do is to use WebContainers for the list and then use EmbedWithin to embed other WebContainers as rows. There’s a lot of flexibility with that technique, including the ability to have checkboxes, images, etc…

Drag and Drop has worked in Firefox since v3.5. They use the exact same spec as Safari and Chrome.

As I’ve said many times before, this really is one of those features that Xojo should be adding to the framework because it is a system-wide feature. That said, our design goals for drag and drop are:

  • Make the API as close as possible to the way the desktop works.
  • Work seamlessly with WebSDK controls.
  • Completely cross-platform/cross browser.
  • Support for Text, Pictures, Raw Data types and Files.
  • Drag Actions on browsers that support them.

[quote=119141:@Greg O’Lone]Michel Bujardet The variable height is duelly noted, when indeed each cell can have EndOfLine in the text of change in style that change its height. But would it not possible to have something like a FixedRowHeight property that would in turn enable having ScrollPosition ?
Perhaps. That would make a good feature request.[/quote]

I will work on that, then. Thanks.

[quote=119141:@Greg O’Lone]Drag and Drop has worked in Firefox since v3.5. They use the exact same spec as Safari and Chrome.

Michel Bujardet This is a work in progress, though, trying to work client side is not as easy as with Xojo code. We got a proof of concept for Chrome, Mozilla and Safari.
As I’ve said many times before, this really is one of those features that Xojo should be adding to the framework because it is a system-wide feature. That said, our design goals for drag and drop are:

Make the API as close as possible to the way the desktop works.
Work seamlessly with WebSDK controls.
Completely cross-platform/cross browser.
Support for Text, Pictures, Raw Data types and Files.
Drag Actions on browsers that support them.[/quote]

There are actually two different sorts of drag and drop : controls and files.

  • Dropping a file over an area and getting its name is easy. I have yet to figure how one gets the path to it, but it is done elsewhere, so there is a way that remains for me to find. This a very nice way of uploading a file. I did not work too much on that but hope to come up with a WebWrapper ready to use in Xojo in the future.

  • Moving about controls and dropping them over an area. So far starting with the project I posted I have been able to move about and drop Rectangles, ImageWells, Buttons and Labels. Now I have to figure out how to make it work reliably with FireFox and Internet Explorer. When it does I will be happy to post.

FR : 34814 - WebListBox FixedRowHeight property

Draggable has been implemented in IE10 and works perfectly in IE 11.
http://msdn.microsoft.com/en-us/library/ie/hh673539(v=vs.85).aspx

For Firefox, the result is kind of mixed. I found a method at

Where the drag takes place, although it does not show the image of the dragged control, but only a small drag box in FireFox Windows. Nothing in FireFox Mac. But the drop changes the page to the URL of the control name. I believe the problem lies in :

event.dataTransfer.setData('Text', this.id);

[quote=119197:@Michel Bujardet]But the drop changes the page to the URL of the control name. I believe the problem lies in :

event.dataTransfer.setData('Text', this.id);

Actually it looks like the problem lies in a part of the framework that you can’t fix.

I will trust your expertise on that, and leave it alone. It seems Firefox is kind of difficult when it comes to drag and drop anyway :wink:

Well ; considering I started from a clumsy attempt at server-side moving controls that did not work to arrive with Brock’s help at something that works in a majority of modern browsers, it has been an interesting educational journey of pure research with no practical plans enjoyed all the way through :slight_smile:

It appears for Firefox that the “dragstart” event is required. @michel if you get the chance let me know if this gets it working for you on firefox. Otherwise I might have a free hour to throw at this later in the week.

DragStart was already in your project. I searched for specific code, though, and found this which activated drag for Firefox :

[code] //so
dim ms as string
ms = “var dragItems = document.querySelectorAll(‘[draggable=true]’);”+EndOfLine

ms = ms+“for (var i = 0; i < dragItems.length; i++) {”+EndOfLine
ms = ms+“dragItems[i].addEventListener(‘dragstart’, function (event) {”+EndOfLine
ms = ms+“event.dataTransfer.setData(‘Text’, this.id);”+EndOfLine
ms = ms+“});”+EndOfLine
ms = ms+“}”
ExecuteJavaScript(ms)
[/code]

Problem is, now when drop takes place it changes the page to the url by the name of the control dropped. One could see some applications for that, but unfortunately I found no way to suppress that behavior. From research over the Internet, it appears FireFox is not friendly with draggable, and would require extensive work.

Since Greg told me this below, I have stopped looking much further anyway.

Thank you for your offer to help, but I feel like we have explored as far as we could. Going the extra mile would probably ensue an extraordinary amount of work with limited results.

Problem is, now when drop takes place it changes the page to the url by the name of the control dropped…

Throw in an

event.preventdefault()

in the JS code. It will prevent the page from going to the url.

[quote=119499:@Matthew Combatti]Problem is, now when drop takes place it changes the page to the url by the name of the control dropped…

Throw in an

event.preventdefault()

in the JS code. It will prevent the page from going to the url.[/quote]

Throw it where ? In which part of the code ?

In javascript in the dragstart function

I just noticed than in FireFox, any link is naturally draggable together with its picture, just like what happens in other browsers with the code used for the WebControlExtender projects above.

If the link is dropped onto a text field inside the window or into another application text field, the link is added to it.

I am not going to lose sleep over FireFox anyway, but it seems simple enough to create a drag and drop function. Actually, I find that pretty cool.

Doing the same thing in Chrome shows a CopyCursor when the link is dragged over a text field inside the browser, but it does not drop anything. And nothing either in another application.

I was hoping a solution for dropping files onto a web app would be added to the framework by now, but in its absence, Taylor Design’s Custom Web Controls looks like it has a very full-featured option.

Anyone have any news or thoughts on this topic? Anyone using Taylor’s jQueryFileUpload successfully with the latest release of Xojo? Am I missing something?

WCC 1.3.3 runs on Xojo 2015r1. Keep in mind that jQueryFileUpload file drag/drop does not work on Internet Explorer (or Safari Windows, though that’s no longer supported any way). Works well on recent versions of Safari, FireFox, and Chrome. Just make sure your IE users know they cannot drop files but have to click the Add Files… button.

2.0 is still on the way…

[quote=173890:@Daniel Taylor]WCC 1.3.3 runs on Xojo 2015r1. Keep in mind that jQueryFileUpload file drag/drop does not work on Internet Explorer (or Safari Windows, though that’s no longer supported any way). Works well on recent versions of Safari, FireFox, and Chrome. Just make sure your IE users know they cannot drop files but have to click the Add Files… button.

2.0 is still on the way…[/quote]

Any chance you will support IE ? From what I understand the new Spartan browser that Microsoft plans to introduce for Windows 10 will be based on the same engine, so the same solutions should work.