Speaking of the drag-and-drop function, there are similar items in all major, medium, and small websites, especially the drag-and-drop operations on the pop-up layer... In fact, for the pop-up layer, the original purpose of dragging is to make the content blocked by the pop-up layer visible by opening the layer. (Of course, the drag-and-drop function is constantly optimized, this makes the drag-and-drop application have another meaning. The most typical is the custom homepage of igoogle, which meets the order and position of the content modules that the user wants by dragging and dropping ).
The focus of this article is not the drag-and-drop effect of iGoogle. It is an advanced article. This article is the "first level" of drag-and-drop, such as the question, to achieve the simplest drag-and-drop.
Here, the "simplest" means that the stacking sequence of multiple drag-and-drop layers is not considered, the drag range restriction is not considered, and the effects of "dragTo" similar to iGoogle are not considered...
Well, you don't need to talk much about it. Let's look at an instance first:
Drag me to try...
Content... click here --> open because I directly embed all the code on the page, and add a third-party plug-in the blog Garden, the code execution efficiency is high and may not run smoothly.
In fact, dragging involves three mouse events: onmousedown, onmouseup, and onmousemove. Then, you can get the mouse position and the left and top layers to achieve similar effects.
When coding, there are two points to note: one is to get the current style, currentStyle is only valid in ie, so we can implement it through getComputedStyle for non-ie (of course, you can also directly use obj. style [key] To get the attribute value you want)
The Code is as follows:
Function getStyle (o, key) {return o. currentStyle? O. currentStyle [key]: document. defaultView. getComputedStyle (o, null) [key]} // 'currentstyle' only for ie5.0 +
The other point is to use the event when getting the mouse position. The event is strange. It is a local variable in ie and a global variable in moz kernel (which is not accurate but easy to understand ), therefore, when obtaining the mouse position, make a judgment on the event
The Code is as follows:
Bar. onmousedown = function (e ){
E = e? E: window. event; // local variable in 'event' ie and global variable in ff
Params. isDrag = true;
Params. _ X = e. clientX; params. _ Y = e. clientY;
};
Well, pay attention to the above two points and combine the correct ideas. It is not difficult. The following provides the reference code:
The Code is as follows:
Function getStyle (o, key) {return o. currentStyle? O. currentStyle [key]: document. defaultView. getComputedStyle (o, null) [key]} // 'currentstyle' only 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; // local variable in 'event' ie and global variable in ff
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 (params. startTop );
Target. style ['left'] = desL> = 0? DesL + 'px ': 0;
Target. style ['top'] = desT> = 0? DesT + 'px': 0;
}
}
};
Well, now, this article is almost over. For the iGoogle-like drag-and-drop advanced article, there is time to continue. Here is an example of a comprehensive pop-up layer,
Box without any options parameter (the default height is 200px and the width is 300px)
Box without mask
I mentioned this plug-in the pop-up layer above, and also provided the source file download, which only adds the drag effect.
Ps: because of the Code highlight plug-in, there will be a small white block on the mask layer, and no processing is done at the moment...
