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
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:
| 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. Both comments and pings are currently closed. |
Comments are closed.
about 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years ago
Did you connect to the database in both files? save and the index. The release code is the latest.
about 2 years 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 2 years 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 2 years ago
hi.
I need to hide and show the blocks.. Please do the script for this also…
about 2 years ago
BTW, just thought I would let you know that this script is awesome!
about 2 years 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 2 years 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 2 years ago
Please insert an option to remove the blocks when we insert it in a particular container. Thank you in advance!
about 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years ago
really nice script.
about 2 years ago
Heelo, n1 script…
can help me with DB.. can you create small demo script, that create table.. tnx!
about 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years ago
Thanks I resolve all.
about 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years ago
Brilliant script.
Thank you!
about 2 years 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 1 year 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 1 year ago
Thank you very much, just what I needed!
about 1 year 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 1 year 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 1 year ago
To have the block become non dragable use position:absolute; This will not allow dragging.
about 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year ago
gr8 work dude…
thnx for d script..
keep bringin up such nice works..
about 1 year ago
This is a great script. How do I get it to save to the database?
Thanks Brian
about 1 year ago
Can’t find the php and mysql in the portal v2
about 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year ago
Never mind I didn’t see Anand fix. Worked like a charm. Thanks again for an awesome program
about 1 year ago
Excellent ideas here, have emailed my mum so expect a big reply!!
about 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year ago
Sorry man, I fixed it. I moved this site to my new server.
about 1 year ago
This is a great tutorial. I was able to recreate it with no issue, but I am having an issue with dragging a DIV with an IFRAME in it.
In FireFox/Chrome, when you drag a DIV with an IFRAME inside, the browser constantly reloads the IFRAME. In IE, it does not. I would prefer that it did not reload the iframe over and over while dragging. Everything else works fine.
Do you have any thoughts? If you do, I would appreciate it.
Google
about 1 year ago
Dear,
I would like to use drag n drop functionality in menu i hope it will work fine with menu too because i have checked its demo it sounds great but i have to make some changes hope you never mind.
about 1 year ago
I notice that if you move the box to another column the debug info shows the new coordinates that the module would have. If you just move the box up or down a row in the same column the movement is not recorded by save.php is this a bug
about 1 year ago
hi michel,
I’m new in web developing, i having problem here.
When i run your index.php, my web browser detected there is an error on line 17, the javascript can’t call the php getBlocks() function. What is the problem? After that i make a little modification but don’t know why the block can’t save after i drag it to another column.
Thanks for your code any way.
about 1 year ago
Hi Mike,
Loving the script
seems to be a problem in the demo where if you move all of the nodes out of one column you cant then place another back into it.
Cheers,
about 1 year ago
This is a wonderful script, Michael! Thanks for putting this up for us to use!
After downloading and modifying to fit my needs, I did need to make this change to make sure that dragging and dropping in the same column saves the change.
I am still trying to figure out how to either disallow dragging the last block from a column or keeping the column open for dragging an element back when it is empty. I didn’t see any comments about how to fix that yet. If I find something I’ll post back.
Thanks again!
about 1 year ago
great job on this, it’t the perfect thing for a site I’m working on I have only one issue with it, when you drag a block to the right or down it can go for infinity basically, its a minor irritation but is there a way of limiting the range of movement on this.
about 1 year ago
Hello,
sorry but i have another Problem with the Script.
In my Dragable Content there are Textareas with TinyMCE, in IE all works fine, but in Firefox i can’t write anything in the Textarea…
about 1 year ago
Your script is owesome and save me a lot of time. Keep Going man~
about 1 year ago
just wonder if the bugs of “not update any changes when moving around in the same box” has been fixed? mine doesn’t work either…..please help
about 1 year ago
Hey Arthur ,
I get your point. you mean change the “column-1″ and “block-1″ to “column_1″ and “block_1″ index.php and as well as in DB data if you have save any.
I changed it, it works, thx
about 1 year ago
Hey Man , You did a great job………..
I like it very much . Keep rocking
about 1 year ago
Hi,
It’s a great script but I am trying to test this, I tried to setup this on my localhost, I have setup the database and created the table, changed db connection settings in getblock and save files but still I am not able to get the blocks displayed. Everything is displayed expect the drag and drop blocks.
Pls help me.
Thanks
about 1 year ago
Hi Michel,
The code doesn’t work on my system. The apache require tag <?php instead of <?
So, I changed all <? into <?php. However, I don't know how to alter this line of code in file index.php. Please help:
var settings = {};
Thank you,
Vivi
about 1 year ago
Thanks for this great script however it doesn’t work on same column, also the fix doesn’t work.. please fix this
about 1 year ago
Hi,! I tried downloading your script, but the archive seems to be corrupted in some way, not all files where there.
I finally managed to get the missing files by following your source-code on the demo-page and manually downloading them, but I soon got another problem.
On this page that demostrates your script it has a dotted border around:
http://www.dhtmlgoodies.com/submitted-scripts/i-google-like-drag-drop/index.html
and that makes it possible to see where you can drop a box and not. But on your demo page no borders are visible and it’s not possible to move a box back to an “empty” column. Meaning that if you move all boxes from the right side to the middle and left, there’s no way of getting them back to the right.
about 1 year ago
Michel,
Is there a way to limit the number of blocks in a column?
Thanks,
Jon
about 1 year ago
looks gr8
about 1 year ago
Hi,
Sincerely thanks for this script.
Just one thing, the save.php is not called when I change order in the same column !!
It is a big problem for me, is it possible to tell me how can I solve this issue ? Is there an others *.js version available ?
Thx again
about 1 year ago
sorry my english is not good
how can i drag and drop the blocks within the same column?
thank you
about 1 year ago
Hello all,
To fix the dragging in the same column change ‘ghosting’ to true.
about 1 year ago
Hi,
Thanks for great Script. But I need it user specific. I mean if a user login to my site and change the div position. Then that postion will be save accroding to user specific. When the user again login he will change the modify screen he set. But if any user doesn’t modify the screen then he will see the default screen.
I’ll look forward to hear from you soon
Thanks Again
about 1 year ago
@Jarnail
You can do this pretty easily, just save the blocks with a user_id. But you will have to build this yourself. The script does not include a user system
I am beginning now, to develop version 3.0 because 2.0 was a success and I get allot of good feedback, enough to build an improved version
about 1 year ago
I am trying to implement this into my site. I am using iframes for the block data. I took the demo and modified two of the block to include iframes which pull data from other sites (for example yahoo.com and cnn.com). But I find they both show the same site.
Not sure if I changed something in my implementation or not. But should I be able to use iframes with this?
<iframe marginwidth="0" marginheight="0" width="250" height="320" src="http://www.yahoo.com" type="text/html" frameborder="0" scrolling="no"
about 1 year ago
Something I would like to see:
Users can dynamically add new blocks to the page by dragging them from some control at the top of the page. How could this be achieved? Each user could have their own page layout with whichever blocks they have added.
Also how can I convert this to use with ASP.NET and SQL server?
Thanks!
about 1 year ago
nice script. I am waiting for your version 3.0 .. Please let us know when it will be available. thanks.
about 1 year ago
Hi, has anyone figured this out? Thanks!
about 1 year ago
Srry… i’m newbie but can someone tell me how to install??/
about 1 year ago
@mark, @jon,
There is no way yet to limit the number of blocks per column, but this is a nice feature to include in version 3! I will look into it very soon.
I also created a public repo on github were you can track changes and download the latest source.
https://github.com/mdahiemstra/iGoogle-Drag-Drop-portal
about 1 year ago
I know it doesn’t have anything to do with this project, but can you make a javascript coda that people cas set ther own homepage… (like their favorite)
I really apriciate if you can
about 1 year ago
I downloaded this sample but seem to have run into a bug.
1. I am trying to update the block content via a php script rather than have static content.
2. I modified loaddata to the following (to use loaddata2):
loadData2 : function (data) {
new Ajax.Updater(data, ‘updateblock.php’ );
}
3. data is set to a block name like ‘block4′. and updateblock.php just returns the following
Block4 title
Blockxxxx 4 updated
Updated from script 4 data update
4. This seems to work BUT, When I do this then BLOCK 4 is not longer draggable.
Any idea whats up? This seems to be a show stopper.
about 1 year ago
sorry the previous entry seems to have stripped off html tags
This is what item 3 above should have said (where {LT} is a less than sign and {GT} is a greater than sign.
3. data is set to a block name like ‘block4′. and updateblock.php just returns the following:
{LT}h1 class=”draghandle”{GT} Block4 title {LT}/h1{GT}
Blockxxxx 4 updated
Updated from script 4 data update
about 1 year ago
Hi Michael,
Sorry but I’m Italian, I’m using a translator.
Can you tell me how I should set this script to my database?
I downloaded the package and I hosted on my site, I configured the “mysql_connect.php” but if I go on the “index.php” can not display the drag & drop.
about 1 year ago
@Marco did you import the sql structure and data to your mysql database? This contents is in blocks_get.php
about 1 year ago
Ok, i saw the file:
Now what are the tables that I create?
Thanks in advance.
about 1 year ago
@Marco
Add the following to your mysql database:
https://github.com/mdahiemstra/iGoogle-Drag-Drop-portal/blob/master/blocks_save.php
so:
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=4;
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 1 year ago
Ok, thanks but now I put to you that you saved positions do I do?
On the index.php not save ..
about 1 year ago
@Marco
You have to uncomment the lines in the file blocks_save.php
Uncomment line: 43 and 49
about 1 year ago
So:
/* mysql_query(“INSERT INTO blocks (block_id, column_id, order_id) VALUES (‘{$block_id}’, ‘{$column_id}’, {$order_id})”); */
and this:
/* mysql_query(“UPDATE blocks SET block_id = ‘{$block_id}’, column_id = ‘{$column_id}’, order_id = {$order_id} WHERE unique_id = “.$block_exists[0]); */
PS= Sorry if you do not waste time but are very experienced like you!
about 1 year ago
HELP, please Michael!
about 1 year ago
It not working for IE 9 and Firefox,
I won’t be able to drag the box.
about 1 year ago
Yes those are the lines which save it to your database.
I just want to say it’s a nice script which works great with some aditions.
about 1 year ago
PS Heb je op het NHL gezeten?
about 1 year ago
@Marco, Yes, uncomment those lines.
@Terrence, on wich platform are you? Last time I tested it worked in all browsers on unix and windows, even ie6 lol.
@Erwin, thanks. But it’s very old and outdated. Making a version 3 now.
Nee heb niet op het NHL gezeten, heb geen studie gevolgd ben er zo in gerold en al 8 jaar werkzaam.
about 1 year ago
Ok, ho levato quelle stringhe e il block_save.php è così:
$block_id) {
/* check if the block is already present in the database */
$block_exists = mysql_fetch_row(mysql_query(“SELECT * FROM blocks WHERE block_id = ‘{$block_id}’”));
/* if not, we insert it */
if ($block_exists == FALSE) {
echo date(“h:i:s”) . ” – Moved block: {$block_id} to column: {$column_id} and updated rank to: {$order_id}“;
}
/* or else we update it */
else {
echo date(“h:i:s”) . ” – Moved block: {$block_id} to column: {$column_id} and updated rank to: {$order_id}“;
}
}
}
?>
Quando vado sulla index, nonostante abbia aggiornato la pagina i box non rimangono nella stessa posizione e non si salvano!
Come mai?
about 1 year ago
Sorry i don’t have translate!! XD
This is the code that I find myself in block_save.php
When I go on the index, although it has updated the page, the boxes do not stay in one place and not saved!
Why?
about 1 year ago
@Marco,
I do not understand italian but you REMOVED the lines, you have to UNCOMMENT them.
So this is the code:
< ?php/* establish the mysql connection */
require_once 'mysql_connect.php';
$data = $_POST;
foreach ($data as $row) {
/* split up in segments */
$segments = explode(':', $row);
/* define the column */
$column_id = $segments[0];
/* the blocks */
$blocks = explode(',', $segments[1]);
/* we take each block */
foreach ($blocks as $order_id => $block_id) {
/* check if the block is already present in the database */
$block_exists = mysql_fetch_row(mysql_query("SELECT * FROM blocks WHERE block_id = '{$block_id}'"));
/* if not, we insert it */
if ($block_exists == FALSE) {
mysql_query("INSERT INTO blocks (block_id, column_id, order_id) VALUES ('{$block_id}', '{$column_id}', {$order_id})");
}
/* or else we update it */
else {
mysql_query("UPDATE blocks SET block_id = '{$block_id}', column_id = '{$column_id}', order_id = {$order_id} WHERE unique_id = ".$block_exists[0]);
}
}
}
?>
about 1 year ago
Don’t work!
I have that code on block_save.php replaced, but it does not! HELP ME!
about 1 year ago
I’m sorry mate but that should work perfectly. Are you sure the connection to the mysql database was established? Check the ajax response with firebug or some tool to verify.
It should work that way.
about 1 year ago
When I try to move a box on the toolbar of the information I get this code:
$block_id) { /* check if the block is already present in the database */ $block_exists = mysql_fetch_row(mysql_query(“SELECT * FROM blocks WHERE block_id = ‘{$block_id}’”)); /* if not, we insert it */ if ($block_exists == FALSE) { mysql_query(“INSERT INTO blocks (block_id, column_id, order_id) VALUES (‘{$block_id}’, ‘{$column_id}’, {$order_id})”); } /* or else we update it */ else { mysql_query(“UPDATE blocks SET block_id = ‘{$block_id}’, column_id = ‘{$column_id}’, order_id = {$order_id} WHERE unique_id = “.$block_exists[0]); } } } ?> $block_id) { /* check if the block is already present in the database */ $block_exists = mysql_fetch_row(mysql_query(“SELECT * FROM blocks WHERE block_id = ‘{$block_id}’”)); /* if not, we insert it */ if ($block_exists == FALSE) { mysql_query(“INSERT INTO blocks (block_id, column_id, order_id) VALUES (‘{$block_id}’, ‘{$column_id}’, {$order_id})”); } /* or else we update it */ else { mysql_query(“UPDATE blocks SET block_id = ‘{$block_id}’, column_id = ‘{$column_id}’, order_id = {$order_id} WHERE unique_id = “.$block_exists[0]); } } } ?>
about 1 year ago
@Marco
Did your save file start with
Or does your server even support PHP?
about 1 year ago
My server support the PHP.
I don’t understand this:
Did your save file start with (???)
Sorry..
about 1 year ago
With
< ?phpabout 1 year ago
My block_save.php file start with
< ?php
about 1 year ago
The drag and drop script is great and I am sure will be very useful in the future.
about 1 year ago
How can you solve this..problem..
Actually I run this as a seperate one…it works fine… but i integrated it in my application it says…
“uncaught exception: Portal requires Effects to be loaded.”
I have all effects.js and all….i copied all js files into one…all js files are loaded …like portal.js and anll…but it showing error..can u pls help me…where exactly im doing wrong…
Thanks in advance..
about 1 year ago
Hi Michel…
This is really good Script I like this very much…
Ineed a small help …..’I need on row column wise dran and drop” we dont need to drap from one column to another column…In our application we need only columns wise drap and drop…” because in one tab we have more with with jquery tables and all so…we need only column wise drag and drop…pls let me know where we need to change…cor column wise drana nd dop…
Pls reply as soon as possible….
about 1 year ago
I try like this for column wise instead of changing in script file…..
<!—->
<!—->
sssss
<?sssss
sssss/h1>
sss
Block 3
Block 3 data
Block 4
Block 4 data
Block 5
Block 5 data
<!—->
<!—->
Block 4
Block 4 data
Block 5
Block 5 data
about 1 year ago
I added all my javascript files to my application tfor dran and drop but it will break down other jquery function…it show DOM Error.
about 1 year ago
Nicely done mate! Appreciate that you made my life easier. Needed iGoogle like dragging boxes for my client and came across you website. Thanks!
about 1 year ago
When you take all blocks out of one column, you can’t add them back to that column…
about 1 year ago
Its a great !
about 1 year ago
Hello, i just wanted to say that i love your script, but it seems like blocks_save.php inserts a new empty post to the database if a column is empty when you refresh the page, wich causes errors since it can’t place a block without id.
Also, i would love the ability to have draggable containers, like a additional column inside a block where you can place more blocks.
Best regards, Erik Hallros
about 1 year ago
Its really awesome !!
I have some Issue:
1) If i take all blocks from any column, i m unable to add the block back to that column.
2) can I update/edit the content inside the block. like if I want to add image in the block or text.
Plz update me ASAP.
Thanks
about 1 year ago
Hey Kevin
I solved it.
You just have to comment 43,44 line in blocks_save.php file.
about 1 year ago
Couldn’t you just add a hidden block, like with style=display:none, that would act as a place holder for a top row of blocks in all the columns?
about 11 months ago
Please fix the problem with prototype 1.7 (which is needed for IE9)
Drag and drop works, but the blocks trip over each other.
about 11 months ago
If I empty a column, I’m unable to drop any boxes back into it. How can I make the column fixed so that boxes can be dropped back into it
about 10 months ago
Hi Michel,
I’ve got an issue trying to make your script working. I installed correctly the DB and uncomented the lines in the blocks_save.php script but the blocks do not appears on the webpage.
In installed Firebug and it tells me “invalid XML markup
var settings = ; ”
I looked on google and it seems to come from the “<?" so I modified my php.ini file on my server to enable short_open_tag and it is still not working.
Can someone helps me fixing this issue please ?
Thanks in advance
about 10 months ago
Just spun this up… Worked like a charm.
Being a noob, I was stuck as it wasn’t saving changes, but read I followed the following comments:
Followed Marcus #52 (removed the // from both Insert and update lines) – now switching from column to column is saved.
Followed Iris #86 (changed – to _ for block id’s in both index.php and database), now order in column are saved.
Thanks for great script – thanks for great comments to help me spin this up!
about 10 months ago
For those who has the same issue than me, just replace <? by <?php everywhere.
Thanks Michel for your script, I've got it working now.
about 10 months ago
To save the movement of blocks in the same container, you can turn ghosting on as Michel suggested, or comment out this line in the onEnd function (by prepending //) of dragdrop.js:
if(this.lastValue != Sortable.serialize(this.element))
about 8 months ago
Hi Michel!
This is what i’m looking for!, It’s only not possible for me to show the boxes. I uncommented the lines, replaced <? by <?php, and made succesfully connection to the database. But the boxes just don't appear. In my firebug i get an error on the DOM it said: "Error: "throw $continue" is deprecated, use "return" instead" This refers to the prototype.js. I don't know if that has anything to do with the problem.
Thanks in advance!
about 8 months ago
Ah I know where the error is, in:
var settings =;
This don’t activates the function on my page and therefore the boxes won’t appear. When I take the var setttings from your example:
var settings = {“column-1″:["block-1"],”column-2″:["block-3","block-4"],”column-3″:["block-2"]};
The boxes appear. But it is not dynamic anymore.
I tried everything but still not able to activate the function,
can you help me?
about 8 months ago
@Jaap, you just assigned a empty variable which generates a syntax error, please use
var settings = {};
If you assign the settings from my example indeed its static, thats the point
making it dynamic with your own code