Michel Hiemstra - Web Development & Internet Marketing » scriptaculous http://www.michelhiemstra.nl/blog Just another WordPress weblog Wed, 30 Mar 2011 14:59:03 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Project #0: iGoogle-like Drag & Drop Portal v2.0 http://www.michelhiemstra.nl/blog/igoogle-like-drag-drop-portal-v20/ http://www.michelhiemstra.nl/blog/igoogle-like-drag-drop-portal-v20/#comments Mon, 14 Sep 2009 07:33:29 +0000 Michel Hiemstra http://www.michelhiemstra.nl/blog/?p=77 More >]]> Because i am getting alot of visits for the js-portal i decided to fine-tune it a bit. So, in follow up of version 1 here’s version 2 :)

Visit the demo for download, and please comment if you like it and use it, it’s kinda fun to see it in a working project.

Update: On request i added MySQL database support, the script now saves the blocks into DB and pulls them out

Update2: I get allot of good responses but also many feature requests, so i decided to ask you script users what you would like to see as a new feature in the script, and i will try build it all in. Please type a comment on what you would like to see build in :)

Update3: 17 Nov 2010, Hi all, there has not been much activity lately on this script, but I decided to create a complete new version. Would you like it to have jquery support too? Im thinking about it.. I also made a public repository on github, you can visit and help coding here:

https://github.com/mdahiemstra/iGoogle-Drag-Drop-portal

]]> http://www.michelhiemstra.nl/blog/igoogle-like-drag-drop-portal-v20/feed/ 150 iGoogle-like Drag & Drop Portal v1.0 http://www.michelhiemstra.nl/blog/igoogle-like-drag-drop-portal/ http://www.michelhiemstra.nl/blog/igoogle-like-drag-drop-portal/#comments Wed, 10 Jun 2009 17:30:38 +0000 Michel Hiemstra http://www.michelhiemstra.nl/blog/?p=9 More >]]> 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

]]> http://www.michelhiemstra.nl/blog/igoogle-like-drag-drop-portal/feed/ 3