iGoogle-like Drag & Drop Portal v1.0
Edit, i made a second version, check it out here
I made a cool drag & drop class in Prototype in combination with script.aculo.us that looks kinda like the one you see on iGoogle
You can download the source here: iGoogle-like drag&drop portal (and the css)
For a demo you can go here
There is a how-to in the source, but for ease i explain it here too
Between the <head> tags you insert:
<script type="text/javascript">
var settings = { 'portal-column-1':['block-test'] };
var options = { editorEnabled : true, 'saveurl' : '/path/to/script' };
var data = { };
var portal;
Event.observe(window, 'load', function() {
portal = new Portal(settings, options, data);
}, false);
</script>
Insert the following between the <body> tags:
<div id="content"> <!-- These are destinations of 'blocks' --> <div id="portal"> <div class="portal-column dir-horizontal" id="portal-column-0"></div> <div class="portal-column dir-vertical" id="portal-column-1"></div> </div> <!-- These are the blocks you can choose from --> <div class="portal-column" id="portal-column-block-list"> <h2 class="block-list-handle">Block List</h2> <!-- Block: testblock --> <div class="block block-test" id="block-test"> <h3 class="handle"><div class="block-controls" style="display: none;"><a class="block-remove"><span>x</span></a> <a class="block-config"><span>e</span></a></div>Testblock</h3> <div class="config" style="display: none;"> <div>config-params</div> <div align="right"> <a href="#" class="cancel-button">cancel</a> <a href="#" class="save-button">cancel</a> </div> </div> <div class="content"> <div id="block-test-content"> test </div> </div> </div> <!-- End: testblock --> </div> </div>
And that should be all, if you have any problems you can comment on this post
| Print article | This entry was posted by Michel Hiemstra on June 10, 2009 at 7:30 pm, and is filed under Javascript / AJAX. Follow any responses to this post through RSS 2.0. Both comments and pings are currently closed. |
Comments are closed.
about 1 year ago
Hi Sir,
I have created a testing,php page in which pasted your code in head tag and body tag. It does not work. No css , No functionality of Drag n Drop.
Plz help me and update me ASAP
Thanks
about 10 months ago
pragti,
Make sure you have changed the save url in the first script above…
Thats the only thing I can think of that would stop the above script working on a default setup.