WE drag and drop files into webpage

[quote=115585:@Michel Bujardet]The method Brock Nash posted is quite interesting. I tried it, and with his help was able to make it work.

Add this method in a module :

Sub draggable(extends wc as webControl, assigns isDraggable as Boolean) if isDraggable then wc.ExecuteJavaScript("document.getElementById('"+wc.ControlID+"').draggable = 'true';") else wc.ExecuteJavaScript("document.getElementByID('"+wc.ControlID+"').draggable = 'false';") end End Sub

To use it:
RectControl1.draggable = true

The drag is absolutely smooth and natural with Rectangle and WebButton I tried. This is perfect. As it stands, it does nothing more than to show how a control can be moved with the mouse. But I am now convinced this is the way to go to implement control drag and drop.[/quote]
Please note that adjusting the DOM like this is completely unsupported.

Keep in mind that the “draggable” attribute doesn’t work on all platforms/browsers.

This was just a quick experiment to see if it worked. At this time I have no intention to use that, or even any project that would include dragging controls. I did that to satisfy my curiosity.

A good place I found to see which browsers support what is http://www.html5browsersupport.com/html5-browser-comparison although they don’t have IE 11.

The method described at http://jqueryui.com/draggable/ shows a nice demo of draggable control.

I think finding a reliable way to drop files for upload is much more interesting and will probably investigate this to be able to apply that metaphor :
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

Of course if Xojo was to implement any of these features it would be great, but in the meantime …

I have an example of simple drag and drop working.

https://www.dropbox.com/s/kxszwuvycmux54a/WebControlExtender.zip

Edit: Here’s an even better one:
https://www.dropbox.com/s/ro09c302ep3hkor/WebControlExtender%202.zip

You can drag and drop any one of the colored squares into the white rectangle to change that rectangle color to the color you dropped in.

[quote=115615:@Brock Nash]I have an example of simple drag and drop working.

https://www.dropbox.com/s/kxszwuvycmux54a/WebControlExtender.zip
[/quote]

Brilliant !

Works perfectly with Safari 7.1, Opera 2.2 and Chrome 27.
Does not work with Firefox 29.
Tested only on Mac OS X.

I guess the method could be applied with a conditional about browsers that support this feature.

Thank you Brock :slight_smile:

[quote=115620:@Michel Bujardet]Brilliant !

Works perfectly with Safari 7.1, Opera 2.2 and Chrome 27.
Does not work with Firefox 29.
Tested only on Mac OS X.

I guess the method could be applied with a conditional about browsers that support this feature.

Thank you Brock :)[/quote]

No Prob. I think adding “s.Append(“e.preventDefault();”)” to the drop event in my example might get it to work in Firefox…
My second example has a slightly better implementation.

[quote=115627:@Brock Nash]No Prob. I think adding “s.Append(“e.preventDefault();”)” to the drop event in my example might get it to work in Firefox…
My second example has a slightly better implementation.[/quote]

With Firefox the problem is not the drop, it is the drag. It simply does not occur.

I just tested your version 2. I see you have added the cursor change. It is very convincing.

[quote=115615:@Brock Nash]I have an example of simple drag and drop working.

https://www.dropbox.com/s/kxszwuvycmux54a/WebControlExtender.zip

Edit: Here’s an even better one:
https://www.dropbox.com/s/ro09c302ep3hkor/WebControlExtender%202.zip

You can drag and drop any one of the colored squares into the white rectangle to change that rectangle color to the color you dropped in.[/quote]
Really interesting Brock! :slight_smile:
Great job.

On window Drag-Drop:

You can use jQuery and attach an event during “Shown” to make a custom control designed with the webSDK recognize the drag/drop events of native Xojo controls.

$(’#controlID’).draggable( {
drag: triggerServerEvent to handle the event
} );

$( “#controlID” ).droppable({
drop: tiggerServerEvent to handle the event
} );

Raise the event in the custom control and handle them all in the raised event by control.id.

To allow a custom control to auto-add these drag/drop events (ie dashboard) is to loop through controls on the window (could use if/isa for specific ones) as webObjects and capture their Control.ID.

File Drag-Drop using jQuery:

$(‘drag-target-selector-control-id’).on(‘drop’, function(event) {

//stop the browser from opening the file
event.preventDefault();

//Now we need to get the files that were dropped
//The normal method would be to use event.dataTransfer.files
//but as jquery creates its own event object you have to access
//the browser through originalEvent. which looks like this
var files = event.originalEvent.dataTransfer.files;

//Use FormData to send the files
var formData = new FormData();

//append the files to the formData object
//if you are using multiple attribute you would loop through
//but for this example i will skip that
formData.append(‘files’, files[0]);

TriggerServerEvent and pass the formdata as an array, or pass files array directly so the websdk can catch it.

}

We’ve been looking into how to do this and make it work with all of our supported browsers and have come to the conclusion that this is one of those features that just needs to be built into the framework. Otherwise there will be several implementations and none of them will work together.

For what it’s worth, the code laid out above simply makes certain items draggable and certain others into drop targets. If all you care about is that the user dragged from point A to point B then you’re all set. The problem arises when you want to define different data types… for instance if a single container can produce both pictures and text, but you have individual targets for each.

Our goal is to make it replicate the desktop API and behavior as closely as the browsers will allow.

After looking at the project Albin Kiland introduced in https://forum.xojo.com/14491-we-ve-created-a-service-partly-with-xojo, I have modified Brock’s project to support pictures.

Enjoy :slight_smile:

WebControlExtender-pictures.zip

Works great Michel. This might actually be of use to me in a current personal project later!
Great work Brock and Michel, you seem to know your stuff.

so, no drag and drop between listboxes yet, right?

You want to do the same with web as this desktop example ? That’s it ?
/Xojo 2014 Release 2.1/Example Projects/Desktop/DragAndDrop/ListBoxesDragAndDrop.xojo_binary_project

[quote=6636:@Trausti Thor Johannsson]Is it possible to handle drag and drops ? Where a user could drag a file into the browser ?
I just can’t find anything about it, except that it wasn’t possible in earlier versions.

I would be quite OK with a solution where if a user would drag any number of files into the browser, that they would just be added to the file uploader.

Also, is it possible to re-arrange the files inside the file uploader ?[/quote]

http://www.thecssninja.com/javascript/drag-and-drop-upload

http://www.redips.net/javascript/drag-and-drop-table-content/

Yes my desktop app allows dragging from one table to insert a row to another.

The above seems interesting, but a bit beyond my web app. Of course anything that will speed it up would be worth checking out.

[quote=119012:@John Scanlan]Yes my desktop app allows dragging from one table to insert a row to another.

The above seems interesting, but a bit beyond my web app. Of course anything that will speed it up would be worth checking out.[/quote]

The issue with WebListBox is that it does not have the same features as the desktop Listbox. For some reason, the ScrollTo method is there, but no ScrollPosition is available, so you never know where the user has scrolled. Plus there is no RowFromXY to know in which row the object has been dropped. With listboxes that do not scroll it could work, but then WE does not offer any built in support for drag and drop. So you have to go through solutions such as the one I posted. I have seen less elaborate projects, though :
http://www.roseindia.net/dojo/dojo-drag-and-drop-examples.shtml
http://www.roseindia.net/java/example/java/swing/drag-drop.shtml

A common alternative to the drag and drop metaphor in pure Xojo is to place a right pointing arrow on a button in between the two listboxes. When clicked, it copies or move the left listbox selected row to the right hand side. And another arrow the other way. It is possible because you have the Selected method of knowing which row is selected, even if the WebListBox has scrolled.

IMHO, that is your best bet if you do not feel like implementing a JavaScript method.

ScrollPosition kinda relies on uniform height rows, which we do not have on web.

RowFromXY has the same restriction.

Fwiw, I tried your code (because I was curious how far you’d gotten) and I noticed that it doesn’t seem to work at all on Firefox or Internet Explorer. Were you aware of that?

[quote=119109:@Greg O’Lone]ScrollPosition kinda relies on uniform height rows, which we do not have on web.
RowFromXY has the same restriction. [/quote]

I understand. But yet you have ScrollTo which sets the first row shown on top of the box. I maybe naive, but does it not mean that you got the number of the topmost shown row available internally in the WebListBox ? Or is it true only when you set it ?

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 ?

After a previous discussion about that in a previous thread, I quickly worked on an alternative using TextFields stacked upon each other to form a list, echoing the content of an invisible WebListBox. No smooth scrolling, but ScrollPosition was available. So a workaround is possible. But as John request shows, maybe in error, people tend to view the WebListBox just as the desktop equivalent and hope for the same features.

Yes for Firefox, where apparently no drag occurs. I will need to check what is going on with Internet Explorer. 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.

Hopefully we will be able to get this working on all major platforms. It may be possible through HTML5 code.