Drag and Drop
It is quick and easy to implement drag and drop functionality in your presentation as USolver supports it out of the box without writing any scripts. Click on the object you want to make draggable and set "Draggable" property to true.
You can also define possible drop zones for the box. To do so, go to the "Drop Zones" property and define where this object can be dropped to (see picture below).
In the example above, I have defined 2 rectangles as drop zone and now if you run your presentation, you will see that yellow object is draggable and you can drop it into one of the two drop zones that are defined.
Defining "Feedback Cell" allows you to record feedback into spreadsheet and implement logic. For example, you can determine if user has places draggable object into correct buckets.
Resetting Dragged Element
There is a quick way for all dragged elements to be reset to their original position. Add a button on the canvas and attach the following script to be executed on click.
var canvas = require('canvas');
exports = {
reset: function () {
canvas.drag.reset();
}
}
This script will reset all draggable elements on the current slide to theirs initial positions. If you provide a specific name (or names) to reset function, it will only reset those elements. It will still look through the elements on the current slide only.
var canvas = require('canvas');
exports = {
reset: function () {
canvas.drag.reset('TXT1', 'TXT2');
}
}
Dragging Along Predefined Paths
There are several built-in functions to help you drag element by a predefined path. Below are three examples how defined (1) a constrain box for dragging, (2) define a linear or (3) a circular path.
var canvas = require('canvas');
// x1, y1, x2, y2 - free drag within the box
var fn_box = canvas.drag.fn.box(500, 70, 800, 190);
// x1, y1, x2, y2 - beginning and end of the line
var fn_line = canvas.drag.fn.line(500, 70, 800, 190);
// x1, y1, r - center and radius of the circle
var fn_circle = canvas.drag.fn.circle(100, 100, 150);
exports = {
box: function (event) {
if (event.type == 'drag-move') {
return fn_box(event.left, event.top);
}
},
line: function (event) {
if (event.type == 'drag-move') {
return fn_line(event.left, event.top);
}
},
circle: function (event) {
if (event.type == 'drag-move') {
return fn_circle(event.left, event.top);
}
}
}
Advanced Drag and Drop
Script below shows an example how to highlight all drop zone where the element can be dropped as well as active drop zone.
var canvas = require('canvas');
exports = {
move: function (event) {
// highlight zone enter/leave
event.dropzones.enter.forEach(function (zone) {
canvas.set(zone, { "svg-stroke-color": "#FF9838" });
});
event.dropzones.leave.forEach(function (zone) {
canvas.set(zone, { "svg-stroke-color": "#AAAAAA" });
});
// drag start
if (event.type == 'drag-start') {
event.dropzones.all.forEach(function (zone) {
if (event.dropzones.enter.indexOf(zone) == -1) {
canvas.set(zone, { "svg-stroke-color": "#AAAAAA" });
}
});
return {
"background-color": '#efefef'
}
}
// drag move
if (event.type == 'drag-move') {
return {
left: event.left,
top: event.top
}
}
// drag drop
if (event.type == 'drag-drop') {
// restore drop zones
event.dropzones.all.forEach(function (zone) {
canvas.set(zone, { "svg-stroke-color": "#000000" });
});
return {
"background-color": '#FFC300'
}
}
}
}