[rob@volleyhollix.com]

Hi,

I’m developing an iPhone app.

Can Mobione allow me to design apps so my users can move and drag around (by tap/hold/slide) images inside a panel?

Also, how can I set up my images so users can resize them inside the panel using their fingers?

Thanks.

[WaylandDavis]

I’ve used Raphael.js for my drawing and dragging functions and it works well. I haven’t done anything with using fingers to resize images or circles, rectangles, etc. I will be doing that soon and will pass on what I learn.

Here’s a sample you can build and test quickly.

Go to Raphaeljs.com and download the javascript library.

1. Build a MobiOne project named “dragtest” with a transparent panel that covers the entire surface.
2. Paste this JavaScript into your dragtest_custom.js file.

phoneui.documentReadyHandler = function()
{
paper = new Raphael(document.getElementById(‘m1-dragtest-panel1’), 320, 410);
mypset = paper.set(); // creates a paper set of elements to act on later in .drag
r = paper.circle(50, 50, 20).attr({fill: “red”, stroke: “none”, opacity: 1});
mypset.push(r);
g = paper.circle(50, 100, 20).attr({fill: “blue”, stroke: “none”, opacity: 1});
mypset.push(g);
b = paper.circle(50, 150, 20).attr({fill: “green”, stroke: “none”, opacity: 1});
mypset.push(b);
p = paper.circle(50, 200, 20).attr({fill: “yellow”, stroke: “none”, opacity: 1});
mypset.push(p);

var start = function () {
this.ox = this.attr(“cx”);
this.oy = this.attr(“cy”);
//this.animate({r: 50, opacity: .25}, 500, “>”);
}
var move = function (dx, dy) {
this.attr({cx: this.ox + dx, cy: this.oy + dy});
}
var up = function () {
//this.animate({r: 20, opacity: 1}, 500, “>”);
};
mypset.drag(move, start, up);
}

var mypset;

Build the app in the test center and then hold the mouse (or your finger) down over each circle and drag it around.

Hope it helps,

wildwex

[nvts]

wildwex,

Thanks for the post. This is pretty cool. I look forward to seeing your updated post in the future.

Cheers…

[rob@volleyhollix.com]

Thanks Wildwex…

This is great stuff! Am too looking forward to your post in regards to resizing images and shapes using one’s fingers.

Robert

[rob@volleyhollix.com]

Hi Wildwex,

Instead of shapes, I’d like to drag and move around my own images that’s on my hard drive.

How do I go about this?

Thanks!

Robert

[Author]

Posts