Javascript supports firefox, ie7 page layout, drag-and-drop effect code

Javascript Drag JavaScript Google IG Drag Demo, very good Drag, ready for F2Blog new Theme background Module Settings, Drag
Dynamic

Drag effect page effect demo address: http://img.jb51.net/online/tuozhuai/google_drag.htm
Enhanced Effect demo address: http://img.jb51.net/online/tuozhuai/google_drag2.htm
Drag principle:
For the basics of drag and drop, refer to this article.

In fact, the principle is very simple. It is to bind three events: onmousedown, onmousemove, and onmouseup.
When you click the mouse (onmousedown), set the coordinates of the element to the coordinates of the mouse, and set the position to the absolute coordinates.
When you move the mouse (onmousemove), the element coordinates are changed.
Unbinds an event when the mouse clicks (onmouseup) and performs subsequent operations.
Javascript drag-and-drop is a Demo (including prototype) about the drag-and-drop effect of a personalized google homepage ). Full download package: Google
Drag.rar (19.82 KB, download: 247 times)
There are a total of four files:

Google_drag.html
Prototype. js
Universal drag function drag. js
Drag google_drag.js on the google personalized homepage
There is an initialization drag function in the last few rows in google_drag.html.

Window. onload = function () {initDrag ();}

It must be written in this way.

Window. onload = initDrag ();

In this case, an error will be reported in IE: not implemented
For other code, you can directly view the source code, just a few lines of comments. In fact, we used JavaScript to draw 15 divs and set them.
All the classes are drag_div (the following uses className to determine whether the element can be dragged), and then sets the ID of the drag-and-drop part.
Add _ h after the element ID (you can also set yourself as the drag part)
Drag. js is a common drag function. It contains four simplest functions: start_Drag, when_Drag, end_Drag,
After_Drag. These four functions are only the most basic drag-and-drop functions. to implement other functions, you can modify them or overwrite them later.
Google_drag.js is a function similar to google's personalized homepage drag-and-drop effect. It overwrites the four functions mentioned above to achieve comparison.
Advanced effects.
The drag operation should be simple. After the drag operation is completed, Ajax is used to transfer the drag position and change the server value,
In this way, the location of the element remains unchanged for the next user access. The implementation of the effect is very simple, mainly how to integrate it into existing projects, from
Improve user experience.
This Demo has some online code for reference.
There are many such examples on the Internet, but I feel that the efficiency is not high. Some examples are to set the positions of all elements
Absolute, and then directly modify the top and left of each element to display the effect. I feel that it is not very common.
It is troublesome to change this effect to a drag-and-drop operation and record the positions of each element. The bit of the element to be recorded in this example
You only need to record the id of the drag-and-drop element after the drag-and-drop is completed, and then send it to the server for modification.
.

Update
Added an enhanced version. For the effect, see the Demo. In fact, a function is added to ensure that only one element exists in the upper-left bulk, such
If more than one element is exceeded, the next element is pushed to the first column below. If no element exists, the first element is taken out of the first column below and placed in the top left corner.
If the first column below has no elements, find the second column and the third column.