Parabolic motion is: when the drag is over, we let the current element move horizontally + vertically at the same time
At the same moving distance, our mouse moves faster, the move method triggers fewer times, and on the contrary, the move speed is slow, the move method triggers more times -> The browser triggers each move behavior by a minimum time.
Through observation, we found something: the speed of moving our box when it ends dragging horizontally and the distance of moving, and the speed of dragging begins. It is only related to the speed of the mouse at the moment when it is about to be released. If the mouse moves fast in the last moment, the distance and speed of our horizontal movement are also relatively large. -> Get the speed when the mouse is about to release the last time.
In the JS box model, offsetLeft is the value obtained by obtaining the left offset of the current element and the obtained valueThere will never be a decimal number, and it will calculate the real left value according to rounding the decimal point.
The specific code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
#box{
position:absolute;
top:50%;
left:50%;
width:200px;
height:200px;
background:#ff6600;
margin:-100px 0 0 -100px;
cursor:move;
/*
Centering without knowing the width and height
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
*/
}
</style>
</head>
<body>
<div id='box'>
</div>
<script>
//JS implements the current element in the center of the screen var box = ('box');
// = (( || )-)/2 + "px";
// = (( || )-)/2 + "px";
//The principle of dragging /*
When the mouse is pressed on the box, we start dragging (binding onmousemove and onmouseup to the box). When the mouse moves, we calculate the latest position of the box.
When the mouse is raised, it means that the dragging is over, and our move and up are useless. Let's remove these two methods.
*/
= down;
function down(e){
e = e || ;
//Record information about the start position this["strX"] = ;
this["strY"] = ;
this["strL"] = parseFloat();
this["strT"] = parseFloat();
//Bind element to move and lift events if(){
()//Bind the current mouse and this together = move;
= up;
}else{
var _this = this;
= function(e){
// move(e)// This in this is window (_this,e);
}
;
= function(e){
(_this,e);
};
}
//When the box is moving, we want to perform the next drag, we press the mouse, but because the box is still moving, the mouse cannot catch the box -> While pressing, we should stop the box's movement. ();
();
}
function move(e){
e = e || ;
var curL = (-this["strX"])+this["strL"];
var curT = (-this["strY"])+this["strT"];
//Border judgment var minL = 0,minT = 0,maxL = ( || ) - ,maxT = ( || ) - ;
curL = curL < minL ? minL :(curL > maxL ? maxL : curL);
curT = curT < minT ? minT :(curT > maxT ? maxT : curT)
= curL + "px";
= curT + "px";
//Calculate the speed of our horizontal movement /*
Trigger move once within the minimum reaction time of the browser. We all record the current box position and let the current position - the last recorded position = the current last offset
*/
if(!){
= ;
}else{
= - ;
= ;
}
}
function up(e){
if(){
();//Unbound the current mouse and box = null;
= null;
}else{
= null;
= null;
//If you bind this way, this binding to move and up is documented }
//When the mouse leaves and ends dragging, we start to perform horizontal animation movement (this);
//When the mouse leaves and ends dragging, we start to perform vertical animation movements (this);
}
//When the mouse moves too fast, our mouse will leave the box, causing the mousemove and mouseup events in the box to be removed -> "Mouse focus is lost" //In IE and Firefox browsers, we can bind the box and the mouse together in one way. //No matter how fast the mouse is, it cannot run out of the document: we bind mousemove and mouseup to the document
function fly(){
//this->The box to be operated at the moment var _this = this;
_this.flyTimer = (function(){
//The speed of our movement is slowing down until it stops ("Exponential decay motion") //this->window
//The box stops moving, clears the timer: the value obtained by offsetLeft will not appear in decimals, and the decimal part is rounded, so we add or subtract a velocity value less than 0.5. In fact, there is no substantial change in the position of the box itself. We think that the box at this stage will stop moving.
if((_this.speedFly)<0.5){
(_this.flyTimer);
return;
}
_this.speedFly*=0.98;
var curL = _this.offsetLeft + _this.speedFly;
var minL = 0,maxL = ( || ) - _this.offsetWidth;
if(curL>=maxL){
_this. = maxL + "px";
_this.speedFly*=-1;
}else if(curL<=minL){
_this. = minL + "px";
_this.speedFly*=-1;
}else{
_this. = curL;
}
},10)
}
function drop(){
var _this = this;
_this.dragFlag = 0;
_this.dropTimer = (function(){
if(_this.dragFlag>1){// At the end of the day, dragFlag is greater than 1 (_this.dropTimer);
return;
}
_this.dropSpeed = !_this.dropSpeed ? 9.8 : _this.dropSpeed + 9.8;
//attenuation _this.dropSpeed*=0.98;
var curT = _this.offsetTop + _this.dropSpeed;
var maxT = ( || ) - _this.offsetHeight;
if(curT >= maxT){// It's the end _this. = maxT + "px";
_this.dropSpeed*=-1;
_this.dragFlag++;
}else{
_this. = curT + "px";
_this.dragFlag = 0;
}
})
}
</script>
</body>
</html>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.