The simplest implementation of js said drag and drop drag and drop, and now major, medium and small sites are essentially similar things, especially for pop-up layer drag, it is common mess. . .
In fact, for pop-up layer, the initial aim is very simple drag and drop is to pull level through to the content being blocked pop-up layer can be seen (of course, was constantly on the drag function is optimized so that the application of drag the other meaning, as the most typical custom igoogle page, drag and drop form to meet the user-defined content modules you want to order and location).
This article discusses the key is not drag and drop iGoogle effect, that is advanced articles, this is a drag and drop the "first order", such as title, to achieve the most simple drag and drop.
Here's the "most simple" drag and drop layers that do not take into account the stacking order, without regard to drag limit, do not consider such iGoogle's "dragTo" effect, etc.. . .
Well, ado, would let you see instances of it:
Drag me try ...
content ... Click here -> open because I was embedded directly in the page all of the code, together with third-party plug-blog garden because the code is efficient, there may be up and running is not very smooth
In fact, dragging the mouse on the three incidents involved, onmousedown, onmouseup, onmousemove, combined with access to the mouse position and the left and the top layer can achieve similar results.
When encoding, there are two areas of attention of a yes get the current style, currentStyle ie only in the next Effective , so the Fei ie we can getComputedStyle realize (of course, for this is not much need for the property of the situation You can also use the obj.style [key] want to get your current property value)
view sourceprint? 1 function getStyle (o, key) (return o.currentStyle? o.currentStyle [key]: document.defaultView.getComputedStyle (o, null) [key ]}//' currentStyle 'only for ie5.0 +
Another point is to obtain the mouse position in the use Dao event, event that something very strange, ie Following is a local variable, moz kernel is a global variable (not accurate, but easy to understand), so in time for Yao to the mouse position event to be a judge
view sourceprint? 1 bar.onmousedown = function (e) (
2 e = e? E: window.event; / / 'event' ie under the local variables, ff under the global variable
3 params.isDrag = true;
4 params._X = e.clientX; params._Y = e.clientY;
Well, pay attention to the above two points, combined with the right ideas can be a matter of fact, not difficult, the following reference code:
view sourceprint? 01 function getStyle (o, key) (return o.currentStyle? o.currentStyle [key]: document.defaultView.getComputedStyle (o, null) [key ]}//' currentStyle 'only for ie5.0 +
03 var drag = function (bar, target) (
04 var params = (
05 startLeft: 0,
06 startTop: 0,
07 _X: 0,
08 _Y: 0,
09 isDrag: false
11 if (getStyle (target, 'left')! = 'Auto') (params.startLeft = getStyle (target, 'left'))
12 if (getStyle (target, 'top')! = 'Auto') (params.startTop = getStyle (target, 'top'))
13 bar.onmousedown = function (e) (
14 e = e? E: window.event; / / 'event' ie under the local variables, ff under the global variable
15 params.isDrag = true;
16 params._X = e.clientX; params._Y = e.clientY;
18 document.onmouseup = function () (
19 params.isDrag = false;
20 if (getStyle (target, 'left')! = 'Auto') (params.startLeft = getStyle (target, 'left'))
21 if (getStyle (target, 'top')! = 'Auto') (params.startTop = getStyle (target, 'top'))
23 document.onmousemove = function (e) (
24 var e = e? E: window.event;
25 if (params.isDrag) (
26 var curX = e.clientX, curY = e.clientY, desL = curX-params._X + parseInt (params.startLeft), desT = curY-params._Y + parseInt (params.startTop);
27 target.style ['left'] = desL> = 0? DesL + 'px': 0;
28 target.style ['top'] = desT> = 0? DesT + 'px': 0;
Well, now, this almost over, similar to iGoogle's drag on the advanced papers, time will, the following combination of drag cite examples of integrated pop-up layer,
Parameter without any options box (the default high-200px, width 300px)
No mask box
The popup plugin I mentioned above, on, and also provides a source file to download, in which it is coupled with the drag effect
ps: Since the reasons for the code highlighting plug-in, there will be a white layer mask box, do not handle suspense. . .