In fact, for the pop-up layer, drag and drop the original purpose is very simple, is to pull through the layer, so that is blocked by the pop-up layer can be seen, (of course, later on the function of drag and drop is constantly optimized, so that the use of drag-and-drop has other meaning, the most typical such as igoogle custom Home page, The order and location of the content modules that the user wants to customize are met by dragging and dropping.
This article discusses the focus is not igoogle drag-and-drop effect, which belongs to the step, this article is dragged "first-order", the title, to achieve the simplest drag.
The "simplest" here is not to consider the stacking order of multiple drag-and-drop layers, regardless of the drag-and-drop range limit, do not consider similar igoogle "dragto" effect and so on ...
Well, no more nonsense, let's show you an example:
Drag me to try ...
Content ... Click this--> open because I am directly embedded in the page of all the code, plus Blog Park Third-party Plug-ins, the reason for the high efficiency of code execution, it is possible to run not very smooth
Drag-and-drop is actually involved in the mouse's three events, Onmousedown,onmouseup,onmousemove, and then combine the location of the mouse and the layer left and top can achieve similar results.
In coding, there are two places to pay attention to, one is to get the current style, currentstyle only in IE effective, so for non-ie we can achieve through getComputedStyle (of course, for this need to get the property is not a lot of circumstances, You can also use Obj.style[key] to get the property value you currently want.
Copy Code code as follows:
function GetStyle (o,key) {return o.currentstyle? O.currentstyle[key]: Document.defaultView.getComputedStyle (o,null) [Key]} ' Currentstyle ' for ie5.0+
Another point is to get the mouse position to use the event,event this thing is very strange, ie is a local variable, the Moz kernel is a global variable (the argument is not accurate, just easy to understand), so in the acquisition of the mouse position when the event to make a judgment
Copy Code code as follows:
Bar.onmousedown = function (e) {
e = e?e:window.event; ' Event ' IE local variable, FF under global variable
Params.isdrag = true;
params._x = E.clientx; params._y = E.clienty;
};
Well, note that the above two points, combined with the right way of thinking in fact, it is not difficult, the following provide reference code:
Copy Code code as follows:
function GetStyle (o,key) {return o.currentstyle? O.currentstyle[key]: Document.defaultView.getComputedStyle (o,null) [Key]} ' Currentstyle ' for ie5.0+
var drag = function (bar, target) {
var params = {
startleft:0,
starttop:0,
_x:0,
_y:0,
Isdrag:false
};
if (GetStyle (target, ' left ')!= ' auto ') {params.startleft = GetStyle (target, ' left ')}
if (GetStyle (target, ' top ")!= ' auto ') {params.starttop = GetStyle (target, ' top ')}
Bar.onmousedown = function (e) {
e = e?e:window.event; ' Event ' IE local variable, FF under global variable
Params.isdrag = true;
params._x = E.clientx; params._y = E.clienty;
};
Document.onmouseup = function () {
Params.isdrag = false;
if (GetStyle (target, ' left ')!= ' auto ') {params.startleft = GetStyle (target, ' left ')}
if (GetStyle (target, ' top ")!= ' auto ') {params.starttop = GetStyle (target, ' top ')}
};
Document.onmousemove = function (e) {
var e = e?e:window.event;
if (Params.isdrag) {
var CurX = e.clientx, Cury = e.clienty, Desl = Curx-params._x+parseint (params.startleft), DesT = Cury-params._y+parseint (P Arams.starttop);
target.style[' Left ' = desl>=0?desl + ' px ': 0;
target.style[' top '] = dest>=0?dest + ' px ': 0;
}
}
};
Well, so far, this article is almost over, about similar igoogle drag and drop into the order, there will be time to continue, the following combination of drag and drop to give a comprehensive pop-up layer example,
box with no options parameter (default high 200px, Width 300px)
box with no mask
This pop-up-layer plugin I mentioned above, but also provides a source file download, this is just add a drag effect
PS: Because the code highlighted the reasons for plug-ins, mask layer will have a small white square, temporarily did not deal with ...
