Michel Hiemstra - Web Development & Internet Marketing » AJAX 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 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