JavaScript supports firefox, ie7 page layout drag and drop effect code_javascript skills

javascript drag JavaScript Google IG Drag Demo, very good drag, ready to be used in the background module settings of F2Blog's new Theme, the page effect demonstration address of the drag effect between


: http://img.jb51.net/online/tuozhuai/google_drag.htm
Enhanced version effect demonstration address: http://img.jb51.net/online/tuozhuai/google_drag2. htm
Principle of drag and drop:
For the basics of drag and drop, you can refer to this article, which is very good.

In fact, the principle is very simple, which is to bind three events: onmousedown, onmousemove, onmouseup.
Set the coordinates of the element to the coordinates of the mouse when the mouse is clicked (onmousedown), and set the position to absolute coordinates.
Change element coordinates when the mouse moves (onmousemove).
Cancel the bound event when the mouse pops up (onmouseup) and perform subsequent operations.
javascript Drag and Drop Below is a demo about the drag and drop effect of imitating Google's personalized homepage (need to include prototype). Complete download package: Google
Drag.rar (19.82 KB, downloaded: 247 times)
There are four files in total:

google_drag.html
prototype.js
Universal drag and drop function drag.js
Imitate Google's personalized homepage drag and drop google_drag.js
There is an initialization drag function in the last few lines of google_drag.html

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

must be written like this. If it is written directly as

window.onload = initDrag();

this will be reported under IE Error: Not yet implemented
Other codes can directly view the source code with just a few lines of comments. In fact, I used JavaScript to draw 15 divs, then set their
class to drag_div (then use className to determine whether the element can be dragged), and then set the ID of the draggable part to the ID of the
element Add _h at the end (you can also set yourself as the drag part)
drag.js is a more general drag function. It contains the four simplest functions: start_Drag, when_Drag, end_Drag,
after_Drag. These four functions only implement the most basic drag and drop functions. To implement other functions, these functions can be modified or overridden later.
google_drag.js is a function that imitates the drag-and-drop effect of Google’s personalized homepage. It covers the four functions mentioned above and achieves relatively
advanced effects.
Drag-and-drop should actually be relatively simple. After implementing drag-and-drop, you need to use Ajax to transfer the dragged position and change the server-side value.
This way, the position of the element will remain unchanged the next time the user accesses it. The implementation of the effect is very simple. The main thing is how to integrate it into existing projects to improve user experience.
This Demo has some reference codes from the Internet.
There are many examples of this on the Internet, but I feel they are not as efficient as this one. There are some examples of setting the position of all elements to
absolute, and then directly modifying the top and left of each element to display the effect. I feel that that is not very versatile. In that case, for example, I want to
modify the effect to a It is quite troublesome to drag and drop several times and record the position between each element. In this example, to record the position of the element
, you only need to record the id of the dragged element and which element it was dragged to after the dragging is completed, and then pass it to the server for modification
.

Update 2007-01-26 1:22
Added an enhanced version, please see Demo for the effect. In fact, a function is added to ensure that the large block in the upper left will only have one element. If there is more than one
, the following elements will be squeezed into the first column below. If there is no element, it will be pushed from the first column below. Take out the first element of the column and put it in the big block of
in the upper left. If there is no element in the first column below, find the second and third columns.