js原生拖拽

原生拖拽

drag = (obj) => {

let pos = document.getElementById('pos')

let that=this

obj.onmousedown = function (ev) {

var e = ev ;

var disX = e.clientX - this.offsetLeft;

var disY = e.clientY - this.offsetTop;

 

if (obj.setCapture) {

obj.setCapture();

}

var topLeft = e.clientX - disX;

var topTop = e.clientY - disY;

document.onmousemove = function (ev) {

var e = ev ;

 

var L = e.clientX - disX;

var T = e.clientY - disY;

 

if (L < 0) {

L = 0;

} else if (L > document.documentElement.clientWidth - obj.offsetWidth) {

L = document.documentElement.clientWidth - obj.offsetWidth;

}

if (T < 0) {

T = 0;

} else if (T > document.documentElement.clientHeight - obj.offsetHeight) {

T = document.documentElement.clientHeight - obj.offsetHeight;

}

if (L > pos.clientWidth - obj.clientWidth) {

L=pos.clientWidth - obj.clientWidth

}

if (T > pos.clientHeight - obj.clientHeight) {

T=pos.clientHeight - obj.clientHeight

}

obj.style.left = L + 'px';

obj.style.top = T + 'px';

}

document.onmouseup = function() {

document.onmousemove = document.onmouseup = null;

if (obj.className == 'tou') {

that.setState({

topLeft: topLeft,

topTop: topTop

})

} else if (obj.className == 'er') {

that.setState({

erLeft: topLeft,

erTop: topTop

})

} else if(obj.className == 'name'){

that.setState({

nameLeft: topLeft,

nameTop: topTop

})

}

if (obj.releaseCapture) {

obj.releaseCapture();

}

}

 

return false;

}

 

}