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;
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
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
Comments