JS drag event (mouse drag event) & finger event (PC mobile terminal drag)

I have written several drag-and-drop effects on the PC and mobile terminals, and I have to review the data every time. Now make a summary record for easy reference later

To write drag events, you must first understand three knowledge points:

• PC mouse drag event
• Finger events on mobile
• Can get the height and width of the moved element, the distance from the movable range

The drag event and the finger event, as the name suggests, are to achieve the drag effect you want to achieve through different trigger conditions. As for the movable range of the third item, it can be the width and height of the parent dom or the visible viewport width. High, customized according to your own needs, the corresponding acquisition method will be provided below

Drag and drop event on PC

Speaking of a few commonly used ones,
if you are interested, you can check all the mouse events. If it is in the framework, such as vue, you can directly use the @+ method to call (the same is true for finger events)
such as @mousedown="xxx"

mousedown：按下鼠标后触发
mouseup：	松开鼠标后触发
mousemove：移动鼠标时触发
mouseout：当鼠标离开当前对象时触发

Finger events on mobile

Just talk about a few commonly used ones, if you are interested, you can check all touch events

Vue can use @touchmove.prevent.top to trigger finger events

touchstart：触摸开始（手指放在触摸屏上）
touchmove：拖动（手指在触摸屏上移动）
touchend：触摸结束（手指从触摸屏上移开）
touchenter ：移动的手指进入一个dom元素
touchleave ：移动的手指离开一个dom元素

Get the height and width of the moved element, and the distance from the movable range

Viewport height and width

Let me talk about the commonly used viewport height and width, because each browser has its own kernel, so some compatibility needs to be considered

**在IE中：**
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
document.documentElement.scrollTop =>窗口滚动条滚动高度
**在FireFox中：**
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
document.documentElement.scrollTop =>窗口滚动条滚动高度
**在chrome中：**
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
document.body.scrollTop =>窗口滚动条滚动高度
**在Opera中：**
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高

Provide a piece of commonly used code (get the viewport height and width)

let windowHeight =
    document.documentElement.clientHeight ||
    document.documentElement.clientHeight ||
    document.documentElement.clientHeight ||
    document.documentElement.clientHeight;
let windowWidth =
    document.documentElement.clientWidth ||
    document.documentElement.clientWidth ||
    document.documentElement.clientWidth ||
    document.documentElement.clientWidth;

Get the distance moved by the mouse/finger

You can get the event through the listener to get the mouse/finger movement distance

document.addEventListener(
  "touchmove",
   (event) => {
    
    
        event.;
		event.touches[0].clientY;
   },
   false
);

Get the width and height of the dom

If the moving range is for the parent element instead of the viewport, you can also limit the moving range by getting the width and height of the parent element

let movePj = document.querySelector("xxx");
movePj.offsetHeight;
movePj.offsetWidth;

Get the distance of dom from top, bottom, left, and right

This method gets the relative distance from the viewport. If you want to get the relative distance from the parent, you have to calculate it yourself

let movePj = document.querySelector("xxx");
movePj .getBoundingClientRect().top;
movePj .getBoundingClientRect().bottom;
movePj .getBoundingClientRect().left;
movePj .getBoundingClientRect().right;

Mobile dom

The last is our mobile dom, which can be achieved through transform.
For example:

xxxxxxx
xxx
在计算结束以后我们需要移动我们的 dom元素 menu 需要横向移动 moveDistance（计算结果）那么可以这样写
menu.style.transform = `translateX(${
      
      moveDistance}px)`;