JavaScript drag javascript Google IG Drag Demo, very good drag, ready for F2blog new theme background module settings, between the tow
Move
Drag-and-drop effect of the 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
The principle of dragging and dragging:
On the basis of drag and drop, you can refer to this article, speak very well.
In fact, the principle is very simple, is to bind three events: OnMouseDown, OnMouseMove, onmouseup.
At the mouse point (onmousedown) the coordinates of the elements are set to the coordinates of the mouse, and the position is set to absolute coordinates.
Changes the element coordinates while the mouse is moving (onmousemove).
Cancels the bound event when the mouse is bouncing (onmouseup) and does a follow-up action.
JavaScript Drag the following is a Demo about the drag-and-drop effect of the Imitation Google Personalization homepage (including prototype). Full Download package: Google
Drag.rar (19.82 KB, download: 247 times)
A total of four files:
Google_drag.html
Prototype.js
Universal drag-and-drop function drag.js
The drag-and-drop google_drag.js of Google personalized homepage
There is an initialization drag function in the last few lines of the google_drag.html
Window.onload = function () {Initdrag ();}
Must be written like this, if directly written
Window.onload = Initdrag ();
This will make an error in IE: not yet implemented
Other code can view the source directly, just a few lines of comment. In fact, you've drawn 15 div with JavaScript and set them
Class is Drag_div (followed by the className to determine whether the element can be dragged), and then the drag-and-drop part of the ID set
Add a _h to the ID of the element (you can also set yourself as a drag section)
Drag.js is a more general drag-and-drop function. It contains four simplest functions: Start_drag, When_drag, End_drag,
After_drag. These four functions only implement the most basic drag-and-drop function, to implement other functions can be modified or overridden in the back of these functions.
Google_drag.js is a function that mimics the drag-and-drop effect of Google Personalization homepage. It covers the four functions mentioned above and implements the comparison
Advanced effect.
Drag-and-drop in fact, it should be relatively simple, after the implementation of drag is to use Ajax to transfer the position after dragging, change the server side of the value,
This allows the element to be positioned unchanged the next time the user accesses it. The implementation of the effect is very simple, mainly how to integrate into existing projects, from
and improve the user experience.
This Demo has a partial reference to the online code.
There are a lot of examples on the web, but it's not as efficient. There are some examples where all the elements are set to
Absolute, and then directly modify the top and left of each element to show the effect, I feel that it is not very common, such as I want to
It's troublesome to change the effect to a number of drags and record the positions between the elements. In this example, to record the bit of the element
, simply record the ID of the dragged element and drag it to the front of the server to modify it after the drag is completed
With a.
Update 2007-01-26 1:22
Added a strengthened version of the effect, see Demo. In fact, just add a function, let him guarantee that the upper left block will have only one element, such as
More than one will squeeze the back into the first column below, and if there are no elements, take the first element from the first column below and put it to the top left.
Chunk, if the first column below has no elements, find the second column, and the third column.
