Make a draggable dialog box with JS script
As the straight left
You can drag ****
The key is to be able to track changes in mouse coordinates, thus constantly correcting the dialog box coordinates.
If the dialog box to be moved is objMove, yes
pX = event.x – objMove.style.pixelLeft;
pY = event.y – objMove.style.pixelTop;
Where pixelLeft and pixelTop are the distance between the left edge and top edge of the dialog box and the left edge and top edge of the Document, and event.x and event.y are the coordinate values of the mouse pressed down (not released).
Therefore, the coordinate difference pX and pY between the mouse grip point and the edge of the dialog box can be obtained. As long as in the process of mouse movement, keep this coordinate difference constant, the moon goes I also go, the mouse to send a box to the village, you can realize the dialog box drag:
objMove.style.left = event.x – pX;
objMove.style.top = event.y – pY;
This is just the principle, and it needs some functions to support it.
Set three functions:
MDown()// triggered when the mouse is pressed, get the value of pX,pY, and put it in the onmousedown call of the dialog box
MMove()// Mouse move trigger, drag, document.onMousemove
MUp()// Trigger, release,document.onmouseup when the mouse is released, of course the onmouseup call placed in the dialog box is also available
Note that this dialog uses absolute positioning.
Two, the text box in the dialog box can be edited normally ****
If there are text boxes, drop-down boxes and other controls available for editing by the user in the dialog box, dragging the cursor in these controls will also cause the dialog box to move if no special treatment is carried out, which is inconsistent with our usual use habits and brings trouble to the editing in the box.
What to do?
It would be nice to know what type of control the mouse lands on when it is clenched.
Hey, boss, you’re in luck! You can obtain this control using event.srcElement
var hitpoint = event.srcElement;
if( hitpoint.tagName == “INPUT”
|| hitpoint.tagName == “TEXTAREA”
|| hitpoint.tagName == “SELECT” )
{
objMove = null; / / don’t bird it
return;
}
Three, translucent ****
This dialog box also needs to be a little transparent, drag the elements below to appear, so that people are excited enough to think about it.
It’s mainly implemented in CSS. style=”FILTER:alpha(opacity=90); position:absolute; left:60%; …
This seems to work with Internet Explorer browsers, but not with Firefox.
Appendix: drag. Js
var objMove = null;
var pX = 0;
var pY = 0;
document.onmouseup = MUp;
document.onmousemove = MMove;
function MDown(objMoveId)
{
var hitpoint = event.srcElement;
if( hitpoint.tagName == “INPUT”
|| hitpoint.tagName == “TEXTAREA”
|| hitpoint.tagName == “SELECT” )
{
objMove = null;
return;
}
objMove = document.getElementById(objMoveId);
if( objMove == null )
{
return;
}
objMove.style.cursor = “move”;
//objMove.setCapture();
pX = event.x – objMove.style.pixelLeft;
pY = event.y – objMove.style.pixelTop;
}
function MMove()
{
if(objMove ! = null)
{
objMove.style.left = event.x – pX;
objMove.style.top = event.y – pY;
}
}
function MUp()
{
if(objMove ! = null)
{
//objMove.releaseCapture();
objMove.style.cursor = “default”;
objMove = null;
}
}