Project #0: iGoogle-like Drag & Drop Portal v2.0
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
| Print article | This entry was posted by Michel Hiemstra on September 14, 2009 at 9:33 am, and is filed under Javascript / AJAX, Projects. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |
about 9 months ago
Hi Michel,
Looks great. I want to use it. Can you give some clues on how to save the positions of the boxes (I want to store the positions in a database)?
Thanks a lot for your work!
about 9 months ago
If you have a picture that is larger then the box it hangs out the side of the box instead of the box cutting it off. How can this be fixed?
about 9 months ago
@Mat,
You could fix that with overflow:hidden in the div with the image.
@Jaap,
Make a DB table, and a script that inserts OR updates the blocks posted on release, where the key is the order, and the value is the block id.
If you need help with this maybe ill add a similar script to the demo.
about 9 months ago
Hi Michel,
I am also looking for a solution to saving the positions of the boxes. I am trying to create a drag and drop document designer that allows the user to place elements of their document in certain areas of the page. I would then need these positions to be saved so they could be called on at a later stage. I get what your saying about creating a database to store the information but I’m unsure what you mean by posted on release. Any help would be appreciated.
Thanks,
Lee
about 9 months ago
Allright, i added MySQL support now. You can download the new portal in the demo. It now saves the blocks in the database, and gets them out again. If you like my script, please comment and tell your friends
about 9 months ago
What should I insert into my db in order to get it started? Also is there any way to allow users to add boxes? Thanks.
about 9 months ago
Oops, i forgot. You have to add the blocks in the table first:
INSERT INTO `blocks` VALUES(1, 'block-1', 'column-1', 0);INSERT INTO `blocks` VALUES(2, 'block-3', 'column-2', 0);
INSERT INTO `blocks` VALUES(3, 'block-2', 'column-3', 0);
INSERT INTO `blocks` VALUES(4, 'block-4', 'column-2', 1);
about 9 months ago
When looking at the debug screen it doesn’t seem to trigger anything when boxes change order in the same column.
BTW the “overflow:hidden” option worked.
about 9 months ago
@Mat,
Hmm i see, that should work tho. In my own version it works perfectly. This is only a little part of the full script i made, but i use that in my own projects. Its far more advanced. I will try to fix the bug so that it posts changes when a block dragged in order in same column. Temp. fix: if you set ghosting to true it works, but you wont get the nice drag effect.
about 8 months ago
I downloaded the files, setup the DB, inserted the data, but I can’t seem to figure out how to connect the demo page to the database. The changes do not get saved. Are you able to give me a hint as to what I need to do to get it to save? I see you mentioned above about adding something to the on release part of the code?? can you expand on that. I appreciate your help and love the potential of this code. Thanks.
about 8 months ago
Did you connect to the database in both files? save and the index. The release code is the latest.
about 8 months ago
Hi,
I downloaded the portal.. It works great.. really i liked it.. But i have a small issue that, when i drag and drop the blocks within the same column, the position is not is not saved in the db.. Can u tell me how to solve this..
Thank u…
about 8 months ago
Hmm the problem seems to come back, i will update the script some time this week and release it again. Stay tuned. While im at it.. any one has other requests that you would like to see implemented?
about 8 months ago
hi.
I need to hide and show the blocks.. Please do the script for this also…
about 8 months ago
BTW, just thought I would let you know that this script is awesome!
about 8 months ago
hi,
To sort the blocks in the same column, I made the changes it works great,
change the following function in line 575 in dragdrop.js
onEnd: function()
{
//Sortable.unmark();
this.lastValue != Sortable.serialize(this.element);
this.observer(this.element)
}
about 8 months ago
Hi, this is a great script.
Can someone explain how to create 2 drag and drop in the same page that are mutually exclusive and how to limit the number of items each column can hold?
about 8 months ago
Please insert an option to remove the blocks when we insert it in a particular container. Thank you in advance!
about 8 months ago
Nice script but 2 small bugs prevent me from implementing this:
At first you can only drag a container from the text part of the header. After that initial drag you can use the complete header space to initiate the drag. (tested with IE-7)
Second is that if you move all containers from the second column you cannot drag them back. This seems only posible when you leave at least one container in the column.
Anyone found a solution for this?
I can code in JS but lack the time to completely debug the script for this
about 8 months ago
Hi,
realy nice script, but is there a way to add a new box on the fly ?
Just adding a DIV with JS/Ajax to one of the columns and put it in the DB is not the problem, but how can i make the div draggable without reloading the Page?
Any Ideas ?
about 8 months ago
I would also like to know where we can limit the number of items dropped into a column.
This is a great script.
Also, where is the style of the “block” defined? I need to change the color to match my site.
about 8 months ago
To clarify, I have figured out where the style is set – but I would like to know if there is a way to change the color of the block based on some value associated with the block. I plan on reading the block information from a database to make my list of blocks – and have a category field that will define the color. That way, different items can have different colors. Not sure how to override the css properly to get the effect.
about 8 months ago
Hey Michel, I’m enjoying your script. It’s just giving me 1 little problem which is that it’s giving me problems with the drop-down menus I have inside the DnD boxes… if I don’t “click” on my DropDowns fast enough, it starts to assume this is a DnD event (I guess) and it bugs my js function to populate a second dropdown menu according to the first dropdown selection… Any recommendations?
about 7 months ago
really nice script.
about 7 months ago
Heelo, n1 script…
can help me with DB.. can you create small demo script, that create table.. tnx!
about 7 months ago
Hey Michel, First of al thanks for sharing this great script! i have it all working perfectly but i was wondering if its possible to add blocks that are NOT draggable as well?
Thanx
about 7 months ago
hi Michel, i have download and setup your script and also making all the functionalities working in my site.. but got one major problem that its not working in IE8. its working in competible view of IE8.
please help me to solve this problem.
Thanks,
Ashish
about 7 months ago
Hi Michel,
This seems to be really a gr8 application developed by you.. thanks a lot for sharing it.. but just want your help in 2 things.
1 what we have to do for adding minimize and close button like iGoogle.
2 This seems to be not working in IE8. please check your demo link also.
please help me to solve this 2 problems i really need to solve this.
Thanks and Regards,
Mihir
about 7 months ago
Hello!
I loved your script, it’ll be helpfull for me!
Thanks for sharing it!
Tomorrow I’ll try do it with ASP, because I work with this language and need a drag and drop like that. But I think that will works fine with ASP too, right?
So… thanks very much! =)
about 7 months ago
Hi Michel,
@@ as per my previous command i have written that The major problem with this script is not working in IE8.
But one another problem i found that Drag and Drop functionality still not working. and i m looking into solving this problem.
But now i have resolved one issue in IE8. ..
I have tried by changing IE8 competible prototype.js (Version : 1.6.1_rc2).
But still not working.. in during debugging i found that Event.observe from Prototype is not supported by IE8. so if you can help me to solve this issue then its really a gr8 achivement for us……
Hope to hear from you soon….
@@if anyone has a solution for IE8 then please send me an reply…..
Thanks ,
Ashish
about 7 months ago
Hello! I’m having a problem!
I’m doing this drag’n'drop with ASP! I’ve done everything like in PHP, but when I tested, in Firefox showed this message: “uncaught exception: Portal requires Effects to be loaded.” And the divs are not showing!
Do you know what can be the problem?
I’ll be waiting your answer!
Best regards!
ps: sorry about my english, actually I’m brazilian! =)
about 7 months ago
Hii Camila ,
The Error seems like you have not taken effects.js i think.. just check that you downloaded all the files or not….
Thanks,
Ashish
about 7 months ago
Hi;
I have mysql problem.You was published about insert values,but fields names.
Can you write that or could you add a .sql file.
about 7 months ago
Hmm. revolse anything.
INSERT INTO `blocks` VALUES(4, ‘block-4′, ‘column-2′, 1);
blocks = tablename
order_id = 4
block_id = block-4
column_id = column-2
But I dont think about 1.
1 at last in sql command.
What fields name for 1.
about 7 months ago
Hi Michel,
@@ Again…. I have completed my whole application same as Igoogle except edit block functionality and it works in all browser.
@@Just want to say that i have searched a lots of application Like Igoogle.
But i must have to say that your application is best in all that including functionality for storing block positions into database..
Thanks a Lot.!!!!
Regards,
Ashish
about 7 months ago
Thanks I resolve all.
about 7 months ago
Is there any fix for overflow:scroll.
if i place the container into another div and try to set a overflow to scroll x, it will not place the drag-able div into the correct column, it will lag however many div are hidden and scrolled to. By the way awesome script.
about 7 months ago
Ok I got it. If you are wanting to contain the wrapper div within another div to overflow:scroll y or x you have to set the ScrollOffset within the prototype.js to true. this will allow accurate dragging when scrolling. This can be found on line 4728 in prototype.js find: includeScrollOffsets: false, set the false value to true and your good to go. I had to do this because I have several columns which span more than 1472px and this would not look pretty in a window if i didn’t place this to overflow:scroll. Enjoy AWESOME SCRIPT ONCE AGAIN
about 6 months ago
Here is the SQL for creating the table and required fields.
–
– Table structure for table `blocks`
–
CREATE TABLE `blocks` (
`unique_id` int(11) NOT NULL auto_increment,
`block_id` varchar(255) NOT NULL default ”,
`column_id` varchar(255) NOT NULL default ”,
`order_id` int(11) NOT NULL default ‘0′,
PRIMARY KEY (`unique_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;
–
– Dumping data for table `blocks`
–
INSERT INTO `blocks` VALUES(1, ‘block-1′, ‘column-1′, 0);
INSERT INTO `blocks` VALUES(2, ‘block-3′, ‘column-2′, 0);
INSERT INTO `blocks` VALUES(3, ‘block-2′, ‘column-3′, 0);
INSERT INTO `blocks` VALUES(4, ‘block-4′, ‘column-2′, 1);
about 6 months ago
Hi Michel,
Firstly: AWESOME script! Love it. Using it in part of my new website (redesign almost complete).
However, like Tunafish (says December 8, 2009 at 1:59 pm), I was hoping to have some blocks not draggable.
How can we do this?
Thanks,
Max
about 6 months ago
Awesome script. Exactly what i was looking for. Best part is that code is very simple. Absolutely loved it. Thanks a ton to Michel
about 6 months ago
Brilliant script.
Thank you!
about 6 months ago
I’m not exactly sure how to get this up and running. Im new to the mysql process. I can’t for the life of me get the tables and such working. Is there any documentation for how to set this up?
I read the post by Jamie Dale about the database but I can’t seem to get it to work.
about 5 months ago
Hi Michel
Excellent script and one that I would like to use on a website that I am updating, before I do would it be possible to have the positions of the blocks saved in a cookie so that they stay in the same place when the visitor comes back to the site? If so could you add that feature – I am not a coder.
I know that you have implemented this via MySQL but I want to avoid using that method.
Take care and thanks for making such a great script available for us all to use.
Stefanovitch
about 5 months ago
Thank you very much, just what I needed!
about 5 months ago
Thanks, Added this to my website, the columns on the right are movable
Just one problem, it doesnt update the mysql db when the columns are moved in the same box.
about 5 months ago
Hi,
I downloaded this and from my initial views it looks great. However, when i empty a column of boxes, i am not able to drop any boxes back into it. its almost as if it disappears once it is empty of boxes, in version 2 anyway!
Many thanks
about 5 months ago
To have the block become non dragable use position:absolute; This will not allow dragging.
about 5 months ago
Hi Michel,
found your perfect looking Drag&Drop-”application”. I tried to adapt it for my webpage and changed this things:
1) I completed the mysql_connect in the save.php and get_blocks.php (wrote it one time and copyed to the other document)
2) Created a database on the webserver with one table an filled it with 4 lines (for the table creation and the insert I used the example mysql-code from the save.php document)
The index.php and get_blocks.php works without any problems. For example: When I allocate block-2 to column-1 it will appear in column-1 after a page reload.
The problem is, that the save.php doesn’t do what it should do… save the new possitions.
Question: Is there more to change then only the mysql_connect and mysql_select_db rows?
Thanks for your support. Tot ziens!
Marcus
about 5 months ago
@Marcus,
What is the message returned by save.php? This is a ajax request so it’s smart to use FireFox with the FireBug plugin, works sweet for javascript debugging
With the plugin you can see the response of the save.php when you move a block, please copy that so I have more specific debug info to help you with the problem.
about 5 months ago
Dear Michel,
thankx for your fast reply. I installed Firebug and are impressed from the endless settings..
Where can I find the activities of the save.php?
In the network area / XHR I can see the POST activities. All entries are similar with the output in the Debug information area of the index.php. The network/JS area is empty.
Marcus
about 5 months ago
Fixed the save.php problem.
Perhaps it was my fault, but the UPDATE and the INSERT query in the save.php was marked as a annotation.
Now it seems so, that a movement in one column don’t start the save.php to store the new order in the database.
about 5 months ago
hi michel,
actually, i have upload and create database. however the block doesnt appear. I am a bit lost right now.
Hope you can help me. Thanks in advanced.
about 5 months ago
Hi,
Thank you for this script. It´s work very nice and fast. But i need help. How can I add block with javascript.
Example:
onclick=’add.Block(6)’
something like this.
A ready created new HTML block with innerHTML, but how I add this block to google drag and drop block.
Thank for your help
about 5 months ago
gr8 work dude…
thnx for d script..
keep bringin up such nice works..
about 5 months ago
This is a great script. How do I get it to save to the database?
Thanks Brian
about 4 months ago
Can’t find the php and mysql in the portal v2
about 4 months ago
Beautiful script, congratulations on very good work. I have the changes updating the database correctly, however if I change the order of the blocks within the column ONLY those changes are not saved and does not show in the debugger. If I change the order in the column and then change any block from one column to another then all will be saved correctly. Any ideas for saving when column order only is changed?
about 4 months ago
Great Script. Very Good job.
How can be use for a lot of people that change blocks of position in his order?
Thanks
about 4 months ago
Like encikbakar said: I’have the same problem…
actually, i have upload and create database. however the block doesnt appear. I am a bit lost right now.
Hope you can help me. Thanks in advanced.
about 4 months ago
Hi,
Thank you for this great script.. however I found a bug… It doesn’t save the data if we change position in same column.. I mean, I don’t move blocks to left-right or middle, I want to change position to up or down. but it doesn’t save this changes.. can u please help us to get this also work..
kind regards,
ahmet.
about 4 months ago
Hi Michael,
This script is exactly what I have been looking for. It is truly above and beyond and very impressive. Very nice of you to make it available to all of us. I was wondering though, I am using safari and it seems as thought the boxes do not save their position when they are moved around within the same column. Is this a setup issue I missed on my end or is it a bug?
Thank You,
Jonnykun
about 4 months ago
Never mind I didn’t see Anand fix. Worked like a charm. Thanks again for an awesome program
about 4 months ago
Excellent ideas here, have emailed my mum so expect a big reply!!
about 4 months ago
I’ve applied @Anand fix but it doesn’t fixed the bug..
the boxes do not save their position when they are moved around within the same column!!
Please HELP!
about 4 months ago
Great script mate.
I just was wondering if there is any way to change the inner HTML of a block DIV according of placement?
ie: a want to use another backgrounds etc. when the block is placed on the left or right side.
about 4 months ago
I have seen the demo and read the reviews and believe your product is what I am looking for. Unfortunately, I cannot seem to untar it. I am using Windows 7 with WinZip 14 and get the message “Error reading header after processing 0 entries.” I tried downloading again in case it was fluke during download, and tried reinstalling WinZip, and always get the same error. Perhaps you need to check it and maybe rezip it. Are you using Linux? Maybe it would untar in Linux but I dont have access to it right now. Can you offer as .zip? or even without compression?
Thanks for quick reply. Am excited about it.
David
about 4 months ago
Great js-portal!!
Can someone help with displaying how to make this user specific?
For example, logged in user to be able to save their settings.
Thanks.
about 4 months ago
Hey,
If you want to trigger (onUpdate) the sort of order in the same column, columns id’s name as “column_ [ID]” and blocks id’s as “block_ [ID]” where [ID] = 1,2,3 …
necessarily “_”
sorry for my English
)
Arthur
about 3 months ago
hi michel
fantastic script thanks a lot.
I am getting following errors on my site
Error in parsing value for ‘font-size’. Declaration dropped.
[Break on this error] div.itemCommentsForm form input.butto… #ccc;background:#eee;font-size:16x;}
k2.css (line 269)
Unexpected token in attribute selector: ‘HTMLCollection’.
[Break on this error]
link.href is undefined
[Break on this error] this.max=this.element[offset]-this.kno…indWithEvent(this,this.elements[i]);}
mootools.js (line 89)
blocks.setStyle is not a function
[Break on this error] blocks.setStyle(‘height’, maxHeight);
k2.js (line 99)
Portal is not defined
[Break on this error] Event.observe(window, ‘load’, function() {
about 3 months ago
Awesome job! I’m just wondering if you can fix the problem about saving the boxes position when they are moved around within the same column, please…
about 3 months ago
Hi Michel,
I have a problem here and I can’t find the solution:
When I add a 5th Box (or 6th, 7th, etc.) to the MySQL-Database, the script doesn’t work anymore. The additional/new boxes are not displayed, and I’m unable to move around the standart boxes. I inserted everything properly to the MySQL, thats not the problem. There just seems to be a problem when i have >4 boxes in the database.
What can I do and how can I adjust this?
about 2 months ago
This is a great help for me, I’m new in JS and is best solution for my problems. The PHP part, i re-write this and works like charming
. If you come to Serbia I’ll buy you a tones of beer!
@paInt – unique_id and block_id must have same numbers, for example:
unique_id -> 22 ; block_id -> block-22
Must work, if you do not make changes to original of Michael script(PHP and MySQL).
about 2 months ago
Hi,
looks like an realy great script.
I’m sorry but i can’t download the files. When i click onto the demo link, it opens a html file with the content db failed…
Can someone send me the whole files?
about 2 months ago
Sorry man, I fixed it. I moved this site to my new server.