All files / src/utils drag.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import Event from './eventHandler' 
 
const drag = (el,downEl)=>{
    let {innerHeight:height,innerWidth:width} = window;
    const {clientHeight,clientWidth} = el;
    const maxLeft = width -clientWidth;
    const maxTop = height - clientHeight;
    
    el.style.position = "fixed";
    downEl.style.cursor = "move";
 
    const _el_cb = (ev)=>{
        const e = ev||window.event;
        const posLeft = e.clientX - el.offsetLeft;
        const posTop  =e.clientY - el.offsetTop;    
        
        const _move_cb = (event)=>{
            const _e  = event||window.event;
            let curX = _e.clientX - posLeft;
            let curY = _e.clientY - posTop;
            curX = curX<=0?0:(curX>=maxLeft?maxLeft:curX);
            curY = curY<=0?0:(curY>=maxTop?maxTop:curY);
            el.style.margin = 0;
            el.style.left = `${curX}px`;
            el.style.top = `${curY}px`;
        }
 
        const _del_move = ()=>{
            Event.del(document,"mousemove",_move_cb)
            Event.del(document,"mouseup",_del_move)
            downEl.style.cursor = "normal";
        }
 
        Event.add(document,"mousemove",_move_cb)
 
        Event.add(document,"mouseup",_del_move)
 
        return false;
    }
 
    Event.add(downEl,"mousedown",_el_cb)
    
}
 
 
export default drag;