Cheers, will checkout the sample - got side-tracked as I’ve found sprites 
Yes, I have multi monitors. And yes, using Firefox Developer.
Thanks.
Thanks for the jQuery UI example. This is really brilliant and works effortlessly with Saola - opening up all sorts of possibles.
I had a look at the normal function but don’t think it is the solution.For example; say I want to create a simple shopping game for schools.
I would add ten pictures of food to the canvas and clicking on any item would add the cost of that item to the overall cost which is display on screen.
At the moment, it looks like I would have to create a new function for every item of food to add the different prices.
Currently, I can see two ways of solving this.
Firstly, use the e.currentTarget.name and a switch case to call a single function and filter the object / element based on the name set in the UI.
Secondly, on scene activate - use getElement for all the items to set a property value containing the price which can then be accessed by a single function using the event object property.
While both of these work, would it not be possible to have a simpler solution such as:
- Functions called directly from an event trigger in the UI can pass parameters:
function fName (dom,e, param1, param2, etc) {}
- Or and maybe better, elements in the UI on the canvas could have user defined properties added. IE where name , class name and title are - we could add user values that get stored on the object alongside the existing properties and are passed with the event object.
Regards,
Thanks, we’ll consider your suggestions. The ability to set user data to an element directly from the UI would be nice.
Just a comment for your current workarounds: On scene activate, creating a name - value map may be faster than getting all elements to set their corresponding values, e.g.
doc.foodCost = {
potato: 100,
bread: 50
};
Then, on element click:
updateCost(doc.foodCost[this.name]); // this is the same as e.currentTarget
Regards
1 Like
Much simpler.
Thanks.
The dragdrop.zip file was very helpful for me. I was able to modify it, but when trying to recreate it something was not working. I copied the scene onSceneActivated function, the makeDraggable function, and the makeDroppable functions. I also created 2 divs labeled dragsource and droptarget. I used all of the default settings that I could find, and those all seemed to match what was in the dragdrop file. I’m missing something but I’m just not sure what it is. Any idea what that might be?
Did you add the jQuery and jQuery UI files to the resources?
That’s got to be it. Thanks!
Thank you for creating the Drag and Drop file (zip) June 18.
I want to create multiple draggable items that drop into a certain target areas. I copied and pasted your original drag element and drop target and gave them the names:
dragsource_1
droptarget_1
I then added the JS code for the scene as:
function onSceneActivated(doc, e) {
// init drag drop
makeDraggable(doc.getElement(‘dragsource’));
makeDroppable(doc.getElement(‘droptarget’));
makeDraggable(doc.getElement(‘dragsource_1’));
makeDroppable(doc.getElement(‘droptarget_1’));
}
I only want dragsource to fall into ONLY droptarget and dragesource_1 to fall into ONLY droptarget_1. What happens now is dropsource and dropsource1 can be dropped into either droptarget or droptarget1. Can you make a suggestion on how I might correct my JS so that different draggable items only drop into certain target areas?
By the way, I just purchased Saola and it is going to help me immensely as I transfer my material from Adobe Flash to Saola. Thank you very much.
Live, laugh, and love life,
Hi Steven,
You can use accept option of the droppable to control which draggable elements are accepted by the droppable.
The code will look like this:
function onSceneActivated(doc, e) {
// init drag drop
makeDraggable(doc.getElement('dragsource'));
makeDroppable(doc.getElement('droptarget'), {
accept: function(draggable) {
return doc.getElement('dragsource').dom == draggable[0];
}
});
makeDraggable(doc.getElement('dragsource_1'));
makeDroppable(doc.getElement('droptarget_1'), {
accept: function(draggable) {
return doc.getElement('dragsource_1').dom == draggable[0];
}
});
}
Hey, toanis,
Thank you so much for the help with this.
With your help, I was able to create a quick drag and drop for 12 terms in the first lesson in economics (Factors of Production). I was able to create this within a half an hour. Thanks again.
Live, laugh, and love life,
1 Like
Hi, Toan Li,
Is there a way to drag and drop to a specific spot (x and y) rather than a specified area? I have been trying to find this through a google search with no such luck. Thank you if you can help me on this.
Live, laugh, and love life,
Hi,
You can resize the drop target to make it small enough, but it’s difficult for the viewer to drop into a small area.
If you want to keep the drop target area but anchor the drag source to a specific point in that area, you need to add script to change the drag source position when it’s dropped. Please share your project if you need help in this case.
Regards
Hi, Toan Le,
I am trying my best to make a supply and demand graph move in Saola Animate similar to how it currently moves in Macromedia Flash. Here is my Flash graph: http://reffonomics.com/sd.html Notice how I can make both curves (supply and demand) move just by grabbing the mouse on any part of the supply or demand curve and moving them up or down. In my attached saola animate project, I can only graph the S on the supply curve and the D on the demand curve and move those to target areas. I want to be able to drop the S or the D at a specific spot inside the green target area. Any help would be appreciated. Thanks.DragDemandandSupply3.saola (77.3 KB)
Hi Steven,
Project file only (.saola) doesn’t contain resources, so in the next time, please send project package (File > Save As > Package) or entire project folder.
Saola Animate doesn’t allow to click through transparent area yet, so you can drag the S and D line. To fix it, please see this thread: Events of transparent areas
To make your project works the same as the Flash version, you need to write script to adjust position of S, D lines and their intersection when dragging. You can refer to the JQueryUI Draggable manual for writing the script.
Here’s your project updated: DragDemandandSupply3_fixed.saolapack (5.2 KB)
Regards
Hi, Toan Le,
You and Saola Animate are the MOST amazing individual and company. I cannot say enough GREAT things about you! Can I make a donation to you and/or Saola Annimate for helping me with this? My email address is: reffonomics@yahoo.com
Live, laugh, and love life,
Reff
2 Likes
Thank you, Steven.
We don’t accept donations.
Please feel free to ask whenever you need help.
Regards
Hi, Toan Le,
I cannot thank you enough for all the support both you and Saola Animate have given with the drag and drop programming. You and your company are OUTSTANDING and respond to questions in a quick and efficient manner. I have hopefully a questions that can be answered. The drag and drop file works perfectly when the user is using a mouse/cursor. Do you have JavaScript that will let the user use their finger and touch pen to drag and drop the dragsouce into the droptarget? Sorry to bother you on this, but I have searched for days for JavaScript to do this and can’t find something that works.
Live, laugh, and love life,
Reff
Hi Steven,
I don’t know any JS library that works well with both mouse and touch devices.
But there’s some small libraries that make JQuery drag-drop works on touch devices.
You can try this one: https://github.com/RWAP/jquery-ui-touch-punch
Just download jquery.ui.touch-punch.js and add it as a resource into your project. Please make sure that it’s included after jQuery UI.
Regards
YOU ARE THE BEST!!! Thank you! This works perfectly!! Live, laugh, and love life, --Reff–
Just out of interest, I was wondering how Drag & Drop support was doing on the possible features for Saola?