And a lot of page effects need to use these locations. You have to practice, you have to remember.
Let's say this simple drag-and-drop plugin based on jquery.
By convention, first talk about the principle of drag and drop, as well as the steps to engage in such an dongdong:
So what is drag? See the name to know: is to drag a dongdong to drag. Put it on our dom and change its position.
It has only two difficulties: 1, how to know is in tow? 2, how to know where to drag, dragged to where?
In fact, this is not difficult, after all, both are the basis of things, the key is skilled.
1, let elements capture events (in general, nothing more than MouseDown, MouseMove, MouseUp)
2, in the MouseDown, the mark starts to drag, and obtains the element and the mouse position.
3, in the MouseMove, constantly get the new location of the mouse, and through the corresponding location algorithm, to reposition the element position.
4, in the MouseUp, the end of drag ... And then the cycle.
In the middle, a need to note the place: the dragged elements, at least need relative or absolute positioning, otherwise drag and drop will not be effective.
OK, not much to say, no code, no truth. The corresponding explanations are in it:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>jeremy-dragdrop Test!</title>
<meta name= "keywords" content= "javascript free drag and drop class"/>
<script type= "Text/javascript" src= "Jquery-1.4.2.min.js" ></script>
<script type= "Text/javascript" >
(Function ($)
{
$.extend ({
Get the current coordinates of the mouse
Mousecoords:function (EV) {
if (Ev.pagex | | ev.pagey) {
return {x:ev.pagex, y:ev.pagey};
}
return {
X:ev.clientx + Document.body.scrollleft-document.body.clientleft,
Y:ev.clienty + document.body.scrolltop-document.body.clienttop
};
},
Get style values
Getstyle:function (Obj,stylename)
{
Return Obj.currentstyle? Obj.currentstyle[stylename]: Document.defaultView.getComputedStyle (obj,null) [stylename];
Return Obj.currentstyle? Obj.currentstyle[stylename]: Document.defaultView.getComputedStyle (obj,null). GetPropertyValue (StyleName);
}
});
Element drag and Drop plugin
$.fn.dragdrop = function (options)
{
var opts = $.extend ({},$.fn.dragdrop.defaults,options);
Return This.each (function () {
Are you dragging
var bdraging = false;
Moved elements
var Moveele = $ (this);
Click which element to trigger the move.
The element needs to be a child element of the element being moved (such as a caption, etc.)
var Focuele = Opts.focuele? $ (Opts.focuele,moveele): Moveele;
if (!focuele | | focuele.length<=0)
{
Alert (' Focuele is not found! the element must being a child of ' +this.id);
return false;
}
Initdiffx| Y: The distance between the mouse and the original point of the moved element at the beginning
Movex| Y: Position of the moved element when moving (new mouse position and initdiffx| The difference of y)
If the callback function in the move is defined, the object will pass in the callback function as a parameter.
var dragparams = {initdiffx: ', Initdiffy: ', MoveX: ', Movey: '};
Moved elements, you need to set the positioning style, otherwise the drag effect will not work.
Moveele.css ({' position ': ' absolute ', ' left ': ' 0 ', ' top ': ' 0 '});
When clicked, record mouse position
Dom notation: getElementById (' * * *). onmousedown= function (event);
Focuele.bind (' MouseDown ', function (e) {
Mark starts moving
Bdraging = true;
Change the shape of the mouse
MOVEELE.CSS ({' cursor ': ' Move '});
Captures the event. (This usage, also has the advantage, is prevents the movement too quickly causes the mouse to run outside the moved element)
if (moveele.get (0). SetCapture)
{
Moveele.get (0). SetCapture ();
}
(actually the distance of the mouse's current position relative to the origin of the moved element)
Dom notation: (Ev.clientx + document.body.scrollleft-document.body.clientleft)-document.getElementById (' * * *). Style.left;
DRAGPARAMS.INITDIFFX = $.mousecoords (E). X-moveele.position (). Left;
Dragparams.initdiffy = $.mousecoords (E). Y-moveele.position (). Top;
});
Move process
Focuele.bind (' MouseMove ', function (e) {
if (bdraging)
{
The new position of the moved element, actually the difference between the current position of the mouse and the original position
In fact, the new position of the moved element can also be directly the mouse position, which can also reflect drag, but the position of the element is not accurate.
Dragparams.movex = $.mousecoords (e). x-dragparams.initdiffx;
Dragparams.movey = $.mousecoords (e). Y-dragparams.initdiffy;
Whether to restrict movement in a region.
Fixarea format: [x-axis minimum, x-axis maximum, y-axis minimum, y-axis maximum]
if (Opts.fixarea)
{
if (Dragparams.movex<opts.fixarea[0])
{
DRAGPARAMS.MOVEX=OPTS.FIXAREA[0]
}
if (Dragparams.movex>opts.fixarea[1])
{
DRAGPARAMS.MOVEX=OPTS.FIXAREA[1]
}
if (dragparams.movey<opts.fixarea[2])
{
DRAGPARAMS.MOVEY=OPTS.FIXAREA[2]
}
if (Dragparams.movey>opts.fixarea[3])
{
DRAGPARAMS.MOVEY=OPTS.FIXAREA[3]
}
}
Move direction: Can be unqualified, vertical, horizontal.
if (opts.dragdirection== ' all ')
{
Dom notation: document.getElementById (' * * *). Style.left = ' ***px ';
Moveele.css ({' Left ':d ragparams.movex, ' Top ':d Ragparams.movey});
}
else if (opts.dragdirection== ' vertical ')
{
Moveele.css ({' Top ':d Ragparams.movey});
}
else if (opts.dragdirection== ' horizontal ')
{
Moveele.css ({' Left ':d Ragparams.movex});
}
If there is a callback
if (Opts.callback)
{
Passing the Dragparams as a parameter
Opts.callback.call (Opts.callback,dragparams);
}
}
});
When the mouse bounces, mark to cancel the move
Focuele.bind (' MouseUp ', function (e) {
Bdraging=false;
MOVEELE.CSS ({' cursor ': ' Default '});
if (moveele.get (0). ReleaseCapture)
{
Moveele.get (0). ReleaseCapture ();
}
});
});
};
Default configuration
$.fn.dragdrop.defaults =
{
Focuele:null,//click which element to start dragging, can be empty. is not empty, a child element of the element being dragged is required.
Callback:null,//Drag to trigger the callback.
Dragdirection: ' All ',//Drag direction: [' All ', ' vertical ', ' horizontal ']
Fixarea:null//limit in which area to drag, provided as an array [Minx,maxx,miny,maxy]
};
}) (JQuery);
Test
$ (function () {
A qualified region with a callback function.
$ (' #dragDiv '). DragDrop ({fixarea:[0,$ (' #dragContainer '). Width () -50,0,$ (' #dragContainer '). Height () -50],callback: function (params) {
$ (' #span1 '). Text (' X: ' +params.movex+ ' Y: ' +params.movey);
}});
Default settings
$ (' #dragDiv1 '). DragDrop ();
});
</script>
<body>
<div id= "Dragcontainer" style= "position:relative;left:10px;top:10px;border:1px dashed blue;width:500px;height : 500px; " >
<div id= "Dragdiv" style= "background-color:blue;height:50px;width:50px;" >
</div>
<div id= "DragDiv1" style= "border:1px solid;" >
</div>
</div>
<span id= "Span1" ></span>
</body>
