Analysis of the implementation principle of drag-and-pull effect 2

This article analyzes the drag-and-drop effect of HTML5 supported browsers, and does not use any libraries to analyze the drag-and-drop process.

First think about how we usually drag and drop how to operate, can be divided into several steps:

1. Mouse press, mouse movement, drag, dragged objects follow the walk
2. Mouse release, object stop, no drag
3. Calculate distance, drag distance (mouse movement)

That corresponds to the event.

1. Onmousedown,onmousemove, start dragging.
2. OnMouseUp, stop dragging.
3. Calculates the relative drag distance

Below we follow this idea, write a drag effect, assuming we drag the title, this piece of content followed.

1. First, let's write a block with headings and content.

?

css为：  #doc{border:1px solid #a0b3d6; background:white;position:absolute; left:150px; top:150px;} #title{line-height:24px; background:gray; border-bottom:1px solid #a0b3d6; padding-left:5px; cursor:move;} #content{width:320px; height:150px;} html: <div id="doc"> <div id="title">标题</div> <div id="content"> 　　内容…… </div> </div>

First, when dragging, we calculate the distance from the top and bottom of the dragged object relative to the screen.

top = Target.top;

left = Target.left;

Write the onmousedown event, which is capable of being dragged on the object

Title.onmousedown = function (event) {

event = event| | window.event;

Prevent text in IE from being selected

This.unselectstart = function () {

return false;

};

Where the record begins

CurX = Event.pagex? Event.pageX:event.clientX +document.body.scrollleft| | Document.documentElement.scrollLeft;

CurY = Event.pagey? Event.pageY:event.clientY +document.body.scrolltop| | Document.documentElement.scrollTop;

}

Write OnMouseMove event, this is moved in the document, Gu should be added to documents

Document.onmousemove = function (event) {

event = event| | window.event;

var nowx = Event.pagex? Event.pageX:event.clientX +document.body.scrollleft| | Document.documentElement.scrollLeft,

Nowy = Event.pagey? Event.pageY:event.clientY +document.body.scrolltop| | Document.documentElement.scrollTop;

var disx = Nowx-curx,

Disy = Nowy-cury;

Target.style.top = Top +disy;

Target.style.left = left +disx;

Write the onmouseup event, which is also in the document, add it to documents

Document.onmouseup = function (event) {

event = event| | window.event;

left = Target.left;

top = Target.top;

}

The complete code is as follows:

var params = {
left:0,
top:0,
currentx:0,
currenty:0,
FlagFalse
};
//Get related CSS Properties
var getcss =function (O,key) {
 Return O.currentstyle? O.currentstyle[key]: Document.defaultView.getComputedStyle (O,FALSE) [key];
};

var StartDrag =function (title, target) {

Params.left = Getcss (target, "left");
Params.top = Getcss (target, "top");

Title.onmousedown =function (event) {
event = event| | window.event;
Bar.onselectstart =function () {
 ReturnFalse
}
Params.flag =True
Params.currentx = Event.pagex? Event.pageX:event.clientX +document.body.scrollleft| | Document.documentElement.scrollLeft,
Params.currenty = Event.pagey? Event.pageY:event.clientY +document.body.scrolltop| | Document.documentElement.scrollTop;
};
Document.onmouseup =function () {
Params.flag = false;
Params.left = Getcss (target, "left");
Params.top = Getcss (target, "top");
};
Document.onmousemove = Function (event) {
Event = Event | | window.event;
if (params.flag) {
var nowx = event.pagex? Event.pageX:event.clientX +document.body.scrollleft| | Document.documentElement.scrollLeft,
Nowy = Event.pagey? Event.pageY:event.clientY +document.body.scrolltop| | Document.documentElement.scrollTop;
var disx = Nowx-params.currentx,
Disy = Nowy-params.currenty;
Target.style.left = parseint (params.left) + disx + "px";
Target.style.top = parseint (params.top) + Disy + "px";
}
}
};

Analysis of the implementation principle of drag-and-pull effect 2