js封装实现盒子拖动

实现移动端导航栏可拖动

 

// 导航栏拖动------------------------------------------------

function objDrag(obj) {

obj.ontouchstart = function(ev) {

var ev = ev || event;

var that = this;

//ev.preventDefault() 

var disX = event.changedTouches[0].clientX - this.offsetLeft;

var disY = event.changedTouches[0].clientY - this.offsetTop;

if(obj.setCapture) {

obj.setCapture();

}

obj.ontouchmove = function(ev) {

var ev = ev || event;

var x = event.changedTouches[0].clientX - disX;

var y = event.changedTouches[0].clientY - disY;

if(x < 0) {

x = 0;

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

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

}

if(y < 0) {

y = 0;

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

y = window.screen.availHeight - obj.offsetHeight;

}

obj.style.right = x + 'px';

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

obj.style.bottom = 'auto';

return false;

}

obj.ontouchend = function() {

document.ontouchmove = document.ontouchend = null;

if(obj.releaseCapture) {

obj.releaseCapture();

}

}

}

}