1. Set the label style (such as img and div): Set position to absolute, for example:
<Div style = "position: absolute" id = "move_id" onmousedown = "mousedown ()" onmouseup = "mouseup ()">
2. Use a temporary element to record the label status. Set the display of the temporary element to none to hide the temporary element. Here, input is used as the temporary element. If the value is 0, the tag has not been moved. When you press the mouse over the label, its value is set to 1, indicating that you want to drag and drop and move.
<Input type = "text" style = "display: none" id = "temp_id" value = "0">
3. Set <body> as follows:
<Body onmousemove = "mousemove ();">
4. Finally, let's look at the JavaScript function:
Code
Copy codeThe Code is as follows:
<Script language = "javascript" type = "text/javascript">
Function mousedown ()
{
Document. getElementById ("temp_id"). value = "1 ";
}
Function mouseup ()
{
Document. getElementById ("temp_id"). value = "0 ";
Document. getElementById ("move_id"). style. cursor = "default ";
}
Function mousemove ()
{
If (document. getElementById ("temp_id"). value = "1 ")
{
Document. getElementById ("move_id"). style. top = event. clientY-10;
Document. getElementById ("move_id"). style. left = event. clientX-50;
Document. getElementById ("move_id"). style. cursor = "move ";
}
}
</Script>