The advantage of using the model of the construction function to develop
1, business logic thinking more clearly;
2, to avoid the emergence of a large number of global variables, only a global variable, which is equivalent to this function module outward exposure of the only interface;
3, if the combination of modular development, it is convenient to add a custom module to the unified modules, as long as the custom module name does not conflict, use will not interfere with each other;
4, the code can be maintained good, the benefit of self-interest;
Second, the following use of this model to drag and drop as an example, to explain.
1, HTML, as follows:
<body> <div class= "box" id= "Box1" ><div class= "main" ><div class= "bar" > Drag zone </div> <div class= "Content" > Contents block </div></div></div> <div class= "box" id= "Box2" ><div class= "main" ><div class= "bar" > Drag area </div><div class= "Content" > Contents block </div></div> </div> <div class= "box" id= "Box3" ><div class= "main" ><div class= "bar" > Drag zone </div> <div class= "Content" > Contents block </div></div></div> </body>
2, CSS
<style type= "Text/css" >
box{position:absolute;left:100px;top:100px;padding:5px;box-shadow:2px 2px 4px # 666666; font-size:12px;}
#box2 {left:500px;}
#box3 {left:900px;}
. main{border:1px solid #a0b3d6 Background-color: #fff;}
. bar{line-height:24px;padding-left:5px;border-bottom:1px solid #a0b3d6 Background-color: #beceeb; cursor:move;
content{padding:10px 5px;height:200px;width:250px;}
</style>
3, JS
Defines the Drag constructor and sets the privileged properties of each instance (that is, the property of each instance object that is to be created in the future); function Drag (bar, target) {//bar is the object that triggers the drag event; this.bar = bar;
Target here is the object to which the value is actually dragged; this.target = target;
This flag is equivalent to a switch that is used to determine whether an event can be performed; this.flag = false;
Add a method to the constructor prototype and add a common method public method to its instance; drag.prototype = {//re-declare the constructor attribute of the prototype, that is, to specify the true creator for the instance; It's okay to not reassign.
Constructor:drag,//Initialize the properties of each instance to prepare for the binding event; Init:function () {//This is actually the object that invokes the Init function method, which is the instance we created;
It's good to write that the code executes to the binding event piece in more detail; var temp = this;
Gets the first set of style values on the instance object, which is left and top properties, Temp.left = Temp.getcss (Temp.target, "left");
Temp.top = Temp.getcss (Temp.target, "top");
Pre-declared to use the following value, this is to store the mouse point down the moment of the mouse relative to the position of the screen (ClientX, clientY) temp.mouseposx = null;
Temp.mouseposy = null;
Emit a command to bind an event to an instance object; Temp.bindevent (); },//Getcss:function (O, prop) {//DOM object's style property points to an object that can only get inline style values, such as <a style= "..." ></A> get;//However, the style values set by the external style sheet and inline style sheet can only be obtained by using the following methods, Currentstyleis IE, and the other corresponds to other browsers; return O.currentstyle?
O.currentstyle[prop]: Document.defaultView.getComputedStyle (o, null) [prop]; }, Bindevent:function () {///first passes the This object (that is, the instance object that we created) to the TEMP variable, so the temp also points to the instance object;//Therefore, within the execution environment of the current function , you want to call this instance object, instead of using this, because this may point to other objects at this point;/For example, when you bind an event to an object, this is definitely pointing to the bound object rather than the first "this" Var t we want.
EMP = this; Monitor the event function under the mouse point temp.bar.onmousedown = function (e) {//This side of the E refers to the event object, the old IE can not be used directly, you have to use the window.event to reference; e = e | | wi
Ndow.event;
Click the moment to turn on this switch, indicating that you can now drag; temp.flag = true;
Gets the position of the mouse relative to the browser window and assigns a value to the Mousepos property of the instance object; temp.mouseposx = E.clientx;
Temp.mouseposy = E.clienty;
};
Listen for mouse movement events, note this event bound to the Document object, because the mouse moves across the file;//This is not possible to bind events with the OnMouseMove method, because our instance may have multiple, and if the second method is used, the last initialized instance is bound to the event function;
Document.addeventlistener (' MouseMove ', function (e) {e = e | | | window.event; Since the flag is specified as true at the point of the mouse, the following code executes;//If we move the mouse without this switch control, the instance objects we create areTo move, if (Temp.flag) {//(E.CLIENTX-TEMP.MOUSEPOSX) represents the distance that the mouse has slid after it has been pressed;//parseint (Temp.left) is when the mouse is not sliding
The initial position of the dragged object; temp.target.style.left = parseint (temp.left) + e.clientx-temp.mouseposx + "px";
Temp.target.style.top = parseint (temp.top) + e.clienty-temp.mouseposy + "px";
}
}); After the mouse release event Document.addeventlistener (' MouseUp ', function (e) {//mouse to open, put this switch, it means that the drag object can not be dragged; Temp.flag = f
Alse;
Records the position of the dragged object after being dragged Temp.left = Temp.getcss (Temp.target, "left");
Temp.top = Temp.getcss (Temp.target, "top");
});
}//Get DOM element, Obar refers to drag bar, Obox refers to actually drag object; var obox = document.getelementsbyclassname (' box ');
var Obar = document.getelementsbyclassname (' bar ');
Create instance objects, pay attention to parameter order; var drag1 = new Drag (obar[0], obox[0]);
var drag2 = new Drag (obar[1], obox[1]);
var drag3 = new Drag (obar[2], obox[2]);
Invokes the Init method on the instance object, specifying the designed operation flow for the instance object; Drag1.init ();
Drag2.init ();
Drag3.init ();
The specific process through the JS note, I hope to help you better use the constructor to achieve drag-and-drop effect.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
