An example of dragging using mouse events commonly used in js

I. Several Necessary Mouse Events Commonly Used in js

onclick: Triggered when a mouse click occurs on an element.
ondblclick: Triggered when a mouse double-click occurs on the element.
onmousedown: Triggered when the mouse button is pressed on the element.
onmouseup: Triggered when the mouse button is released on the element.
onmouseout: Triggered when the mouse pointer moves out of the element.
onmousemove: Triggered when the mouse pointer moves over the element.
onmouseover: Triggered when the mouse pointer moves over the element.

Here's the difference between move and over: over is triggered when the mouse pointer just enters the element and does not change the state when the mouse moves on the element; move is triggered as long as the mouse pointer moves on the element, and the state is always changing when the mouse moves on the element, such as coordinates are always changing, and in most cases, over is used. All right.

2. Use an example to achieve drag-and-drop effect

html Structural code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>drag</title>
    <link href="css/main.css" rel="stylesheet" />
    <script src="js/drag.js"></script>
</head>
<body>
    <div class="loginPanel" id="loginPanel">
         <div style="position: relative; z-index: 1;">
            <div class="ui_boxyClose" id="ui_boxyClose"></div>
        </div>
        <div class="login_logo_webqq"></div>
        <div class="inputs">
            <div class="sign-input"><span>account　Number:</span><span><input autocomplete="on" name="u" id="u" type="text" style="ime-mode: disabled" class="input01" tabindex="1" value="QQ Number or Email accounts" onFocus="if (value =='QQ Number or Email accounts'){value =''}" onBlur="if (value ==''){value='QQ Number or Email accounts';}" /></span></div>
            <div class="sign-input"><span>dense　Code:</span><span><input name="p" id="p" maxlength="16" type="password" class="input01" tabindex="2" /></span></div>
        </div>

        <div class="bottomDiv">
            <div class="btn" style="float: left"></div>
            <div>
                <div id="loginState" class="login-state-trigger login-state-trigger2 login-state" title="Choose online status">
                    <div id="loginStateShow" class="login-state-show online">state</div>
                    <div class="login-state-down">lower</div>
                    <div class="login-state-txt" id="login2qq_state_txt">On-line</div>
       <ul id="loginStatePanel" class="statePanel login-state" style="display: none">
        <li id="online" class="statePanel_li">
            <div class="stateSelect_icon online"></div>
            <div class="stateSelect_text">I am online</div>
        </li>
        <li id="callme" class="statePanel_li">
            <div class="stateSelect_icon callme"></div>
            <div class="stateSelect_text">Q Me.</div>
        </li>
        <li id="away" class="statePanel_li">
            <div class="stateSelect_icon away"></div>
            <div class="stateSelect_text">leave</div>
        </li>
        <li id="busy" class="statePanel_li">
            <div class="stateSelect_icon busy"></div>
            <div class="stateSelect_text">Be busy</div>
        </li>
        <li id="silent" class="statePanel_li">
            <div class="stateSelect_icon silent"></div>
            <div class="stateSelect_text">Do not disturb.</div>
        </li>
        <li id="hidden" class="statePanel_li">
            <div class="stateSelect_icon hidden"></div>
            <div class="stateSelect_text">Invisible</div>
        </li>
    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

The above is the html structure code, not the focus is not not detailed, in addition, because there are too many css code and other image resources are not given, my focus is to sort out how to achieve drag and drop of this panel.
Using the class analysis structure:
loginPanel: The entire panel.
ui_boxyClose: Close button in the upper right corner.
Login_logo_webq: Header area.
inputs: User name and password.
bottomDiv: The icon shows the qq status area.

The following is the implementation of drag-and-drop js code:

//Because classes are basically used in html, we encapsulate a method of extracting elements using class names. getElementsByClassName() is not available at ie10, so we wrap it ourselves.
function getByClass(clsname,parent){
  var par,arr,eles=[];
  if(parent){
    par=document.getElementById(parent);
  }else{
    par=document;
  }
  arr=par.getElementsByTagName('*');
  //console.log(arr);
  for(var i=0;i<arr.length;i++){
    if(arr[i].className==clsname){
      eles.push(arr[i]);
    }
  } 
  //console.log(eles);
  return eles;
}
window.onload=function(){
  getByClass("login_logo_webqq","loginPanel");
}

Then we implement the drag and drop function: we want to achieve the effect that the panel moves when the user drags the page without releasing the mouse in the title area login_logo_webqq.
Here's the condition for the panel to be dragged: Anything that can move with the mouse must have a premise: absolute positioning. So the panel must be positioned absolutely. And dragging means actually that the panel follows the cursor, where the cursor goes, and where the panel goes, so we can simply follow the following implementation:

indow.onload=drag;
function drag(){
  //Get the area where the mouse can be dragged by holding it down: title
  var title= getByClass("login_logo_webqq","loginPanel")[0];
  //console.log(title);
  //Add a mouse-down event to the title area
  title.onmousedown=fdown;
}
function fdown(){
  //You want the panel to follow the cursor. Next you need to get the panel.
  var panel=document.getElementById("loginPanel");
  console.log(panel);
  //When you press the mouse, you should add an event that moves inside the element, that is, move, because it moves across the page, so it's document.
  document.onmousemove=function(event){
     event = event || window.event;
     panel.style.left=event.clientX +'px';
     panel.style.top=event.clientY +'px';
  }  

}

This is the simplest case, but we found that this is wrong. When we press the mouse in the title area to move, the mouse will run to the upper left corner. In fact, this is normal, because when calculating the coordinate value, we use the upper left corner as a reference. How can we keep the mouse in place and not run to the upper left corner? Need to move right and down in the original upper left corner. The panel needs to be moved up and left. So the left and top of the mouse are subtracted from the original position of the mouse press relative to the left and top of the panel. So the key point is to find the position of the mouse press relative to the left and top of the panel. This is also a good way to find the coordinates of the mouse-panel relative to the browser's left,top.

window.onload=drag;
function drag(){
  //Get the area where the mouse can be dragged by holding it down: title
  var title= getByClass("login_logo_webqq","loginPanel")[0];
  //console.log(title);
  //Add a mouse-down event to the title area
  title.onmousedown=fdown;
}
//fdown event is a mouse-down event
function fdown(event){
  //You want the panel to follow the cursor. Next you need to get the panel.
  var panel=document.getElementById("loginPanel");
  //console.log(panel);
  //The relative distance between the cursor and the panel when the cursor is pressed
  event = event || window.event;
  var reX=event.clientX-panel.offsetLeft;
  var reY=event.clientY-panel.offsetTop;
  console.log(reX);
  //When you press the mouse, you should add an event that moves inside the element, that is, move, because it moves across the page, so it's document.
  //Event here is the event when the panel moves.
  document.onmousemove=function(event){
     event = event || window.event;
     panel.style.left=(event.clientX-reX) +'px';
     panel.style.top=(event.clientY-reY) +'px';
  }  

}

The last disadvantage is that we can't go out of the screen in the dragging process. We can solve this problem by:
Our level of left ranges from 0 to (browser width - panel width)
Our vertical top range: 0 to (browser height - panel height)
There is also a point to pay special attention to, that is, there is no top in the stylesheet, left settings, if there will affect the scope of the left, we have here, so we need to first set the top in css, left first to deal with.

window.onload=drag;
function drag(){
  //Get the area where the mouse can be dragged by holding it down: title
  var title= getByClass("login_logo_webqq","loginPanel")[0];
  //console.log(title);
  //Add a mouse-down event to the title area
  title.onmousedown=fdown;

}
//fdown event is a mouse-down event
function fdown(event){
  //You want the panel to follow the cursor. Next you need to get the panel.
  var panel=document.getElementById("loginPanel");
  //console.log(panel);
  //The relative distance between the cursor and the panel when the cursor is pressed
  event = event || window.event;
  var reX=event.clientX-panel.offsetLeft;
  var reY=event.clientY-panel.offsetTop;
  //console.log(reX);
  //When you press the mouse, you should add an event that moves inside the element, that is, move, because it moves across the page, so it's document.
  //Event here is the event when the panel moves.
  //Get the maximum of left and top
  var MX=(document.documentElement.clientWidth || document.body.clientWidth)-panel.offsetWidth;
  var MY=(document.documentElement.clientHeight || document.body.clientHeight)-panel.offsetHeight;
  console.log(MX);
  document.onmousemove=function(event){
     event = event || window.event;
     var X=event.clientX-reX;
     var Y=event.clientY-reY;
     if(X<0){
      X=0;
     }else if(X>MX){
       X=MX;
     }
     if(Y<0){
      Y=0;
     }else if(Y>MY){
       Y=MY;
     }
     panel.style.left=X +'px';
     panel.style.top=Y +'px';
  }  
   // Release mouse
  document.onmouseup=function(){
    document.onmousemove=null;
  }

}

Added by loony383 on Fri, 21 Jun 2019 04:33:30 +0300

Programming VIP

An example of dragging using mouse events commonly used in js

I. Several Necessary Mouse Events Commonly Used in js

2. Use an example to achieve drag-and-drop effect

Popular Keywords