Home > Developer > JavaScript
It took me several days to implement this function. It was mainly implemented when I pulled the box. However, I wanted to process my own business when I dropped the mouse, however, you cannot respond to the mouse's mouseup event. I have also read many examples, all of which are only box pulling. You can implement the function in the move event. However, the mouse lift event cannot respond. Yes, you can handle the event, but you have to move your mouse over it. Later, I found a lot of information and learned how to handle the event.
NowCodeI reorganized it and hoped it would be helpful to everyone.
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = GBK">
<Title> drop-down box </title>
</Head>
<Body>
<Div id = 'lay1'
Onmousedown = 'down (event )'
Onmouseup = 'up (event )'
Onmousemove = 'move (event )'
Style = 'top: 30px; left: 30px; width: 400px; Height: 400px; visibility: visible; Border: solid 1px blue ;'
>
<Div id = 'rect'
Style = 'position: absolute; Background-color: # ff99ff'
>
</Div>
</Div>
<Script language = "JavaScript">
// Whether to (allow) handle the mouse movement event. It is not handled by default.
VaR select = false;
VaR rect = Document. getelementbyid ("rect ");
// Set the default value to hide the Layer
Rect. style. width = 0;
Rect. style. Height = 0;
Rect. style. Visibility = 'hiden ';
// Place the layer you want to draw on the top
Rect. style. zindex = 1000;
// Record the coordinates when the mouse is pressed
VaR downx = 0;
VaR downy = 0;
// Record the coordinates when the mouse is lifted
VaR mousex2 = downx;
VaR mousey2 = downy;
// Process mouse clicks
Function down (event ){
// The mouse movement event can be processed only when the mouse is pressed.
Select = true;
// Display the layer of the frame.
// Rect. style. Visibility = 'visable ';
// Obtain the coordinates when the mouse is pressed
Downx = event. clientx;
Downy = event. clienty;
// Set the starting position of the rectangle to be drawn
Rect. style. Left = downx;
Rect. style. Top = downy;
}
// Mouse lift event
Function up (event ){
// When the mouse is lifted, it is not allowed to process the mouse movement event.
Select = false;
// Hide the Layer
Rect. style. Visibility = 'hiden ';
}
// Move the mouse over the event, the most important event
Function move (event ){
// Obtain the coordinates when the mouse moves
Mousex2 = event. clientx;
Mousey2 = event. clienty;
// Set the size of the pull box
Rect. style. width = math. Abs (mousex2-downx );
Rect. style. Height = math. Abs (mousey2-downy );
/*
This section divides the area into four parts based on the position at which you press the mouse and the position at which the mouse is released when you pull the frame,
We can draw frames separately. Otherwise, we can draw frames in one direction, that is, at the bottom right of a vertex.
*/
If (select ){
Rect. style. Visibility = 'visable ';
// A part
If (mousex2 <downx & mousey2 <downy ){
Rect. style. Left = mousex2;
Rect. style. Top = mousey2;
}
// Part B
If (mousex2> downx & mousey2 <downy ){
Rect. style. Left = downx;
Rect. style. Top = mousey2;
}
// C Part
If (mousex2 <downx & mousey2> downy ){
Rect. style. Left = mousex2;
Rect. style. Top = downy;
}
// D Part
If (mousex2> downx & mousey2> downy ){
Rect. style. Left = downx;
Rect. style. Top = downy;
}
}
/*
When these two statements of code are the most important, without these two statements of code, you can only pull the box, when the mouse is released,
The drop-down box is stopped, but the mouse mouseup event cannot be triggered.
The role of these two sentences is to make the current mouse event not bubble, that is to say, it is not passed to its parent window, so the corresponding mouse can be lifted,
I do not understand this part clearly. If you need it, you can check the information. But these two sentences are the core part,
For these two sentences, I took a few days to pull the mouse box.
*/
Window. event. cancelbubble = true;
Window. event. returnvalue = false;
Function getdivoffsetleft (){
VaR lay1 = Document. getelementbyid ("lay1 ");
// Var rect = Document. getelementbyid ("rect ");
Return lay1.offsetleft;
}
Function getdivoffsettop (){
VaR lay1 = Document. getelementbyid ("lay1 ");
// Var rect = Document. getelementbyid ("rect ");
Return lay1.offsettop;
}
}
</SCRIPT>
</Body>
</Html>
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
