Wednesday, November 21, 2007

Backface facebook javascript widget library now support drag AND drop :)

I had a request last night from Sam Dorman from theleague.com who needed not just dragging stuff around, but also being able to drop them on specific areas. Willing to support the development with a small donation, I felt I could not say no :)

At the moment, I am nearly there. What is supported, is to add any element in the page as a "dropzone", which will be called back on its onDrop function (if specified) when any draggable element is dropped on it, like this;


var pane = createPane(document.getElementById('bar'));
Drag.init(pane);

var zpane = createPane(document.getElementById('baz'));
var foo = 0;
Drag.addDropZone(zpane);

Drag.init(zpane);
zpane.onDrop = function(el)
{
document.getElementById('baz').setTextValue("drop "+foo);
foo++;
}

This sample code (taken from the downloadable demo app) creates two panes (adding dropshadows) out of the elements with ids 'bar' and 'baz' defined in HTML on the page.

It then lets both be draggables, by the calls to Drag.init(element). The createPane function returns the resulting element which holds the content element which was the argument to the call, so it is just another 'div'.

Then we add the resulting div from the pane creation as a dropzone, by calling Drag.addDropZone().

At the bottom a function is tucked onto the zpane div element, which will be called whenever any draggable is dropped 'within' the dropzone element.

What is left to do is to support draggables which are not allowed in a specific dropzone, and then animate a "snap-back" of the draggable in such a case, to its previous strat-drag position.

This is not rocket science, but it will probably not be done today :)

Please comment on this to tell me what you would like to see next.

I'm planning to add resizing to panes, but maybe other stuff is more interesting. I'm almost done with a simple paging table with 'automatic' edit links for the current user, if the same as a defined field. Maybe next week.

Zipfile which include sample facebook app is here; http://supercodex.com/backface/backface.zip

3 comments:

James Miraflor said...

This will be very useful. Thanks.

javieth said...

JavaScript is a good program and very easy to use. I don´t like a complex program. I prefer javascript because i consider it like a device very eficient and it have a good quality.
I always looking for the quality that is why i prefer to buy viagra because i always have a great result in my sexual life.

brinkka said...

Erectile Dysfunction FAQ's

Impotence, or penile erectile dysfunction, in men is not as rare as one would think it is.
In fact, one out of ten men around the world is affected by this condition. It is not exclusive to old men either. Impotence is caused not just by physical factors,
but mental factors as well.
Exercising on a regular basis and eating healthy food will increase your ability to sustain prolonged physical effort and we all know that sex is effort.
Smoking, frequently drinking large quantities of alcohol, taking recreational drugs and lack of exercising will sap your stamina and also slow down the flow of blood.
Penis exercises can be used for maintaining fitness, preventing or controlling premature ejaculation and increasing the length and girth of the penis.
by penis enlargement pills you can overcome these problems and not only that you can also enlarge, extend also to strengthen your penis and premature ejaculation will not exist anymore for you.
visit http://www.factspenisenlargement.com for more info.