Angular中使用 悬浮拖拽
(手机端,PC端均可使用)
第一步:界面上相关元素
<img id="addImg" class="addUser" ng-click="onManageuserAdd()" src="img/icon/manageuser/addCustomer.png">
第二步:js
//添加 新增顾客 悬浮拖拽
var isdrag = false;
var NowLeft, disX;
var NowTop, disY;
//获取需要添加拖拽效果的元素
var oDiv2 = document.getElementById("addImg");
//起始
oDiv2.addEventListener('touchstart', function (e) {
isdrag = true;
//获取元素的起始位置
NowLeft = $("#addImg").offset().left;
NowTop = $("#addImg").offset().top;
disX = e.touches[0].pageX;
disY = e.touches[0].pageY;
return false;
}, false)
//终止
oDiv2.addEventListener('touchend', function (e) {
isdrag = false;
}, false)
//移动
oDiv2.addEventListener('touchmove',function (e) {
if (isdrag) {
oDiv2.style.left = NowLeft + e.touches[0].pageX - disX + 'px';
oDiv2.style.top = NowTop + e.touches[0].pageY - disY + 'px';
if(oDiv2.style.left<'0px'){
oDiv2.style.left='0px';
}
if(oDiv2.style.top<'0px'){
oDiv2.style.top='0px';
}
return false;
}
}, false)
}])