大家好，欢迎来到IT知识分享网。
按坐标来判断是否拖动
// 先编写一个跨浏览器绑定事件的对象吧
var EventUtil = {
// 添加绑定事件
addHandle: function(element, type, handler) {
if(element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
// 移除绑定事件
removeHandler: function(element, type, handler) {
if(element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
}
//获取元素
var dv = document.getElementById('floating');
var x = 0;
var upx = 0;
var y = 0;
var upy = 0;
var l = 0;
var t = 0;
var isDown = false;
//鼠标按下事件
dv.onmousedown = function(e) {
//获取x坐标和y坐标
x = e.clientX;
y = e.clientY;
//获取左部和顶部的偏移量
l = dv.offsetLeft;
t = dv.offsetTop;
//开关打开
isDown = true;
//设置样式
dv.style.cursor = 'move';
}
//鼠标移动
window.onmousemove = function(e) {
if (isDown == false) {
return;
}
//获取x和y
var nx = e.clientX;
var ny = e.clientY;
//计算移动后的左偏移量和顶部的偏移量
var nl = nx - (x - l);
var nt = ny - (y - t);
dv.style.left = nl + 'px';
dv.style.top = nt + 'px';
}
//鼠标抬起事件
dv.onmouseup = function(e) {
upx = e.clientX;
upy = e.clientY;
//开关关闭
isDown = false;
dv.style.cursor = 'default';
// 判断是否要跳转
EventUtil.addHandle(document.getElementById("floating"), "click", function(){
if(isdrag(x,y,upx,upy)){
console.log("拖动过");
}else{
console.log("没拖动过");
}
})
// 判断是否拖动了，这里我设置了5px，大家可以根据自己来进行修改吧
function isdrag(x1, y1, x2 , y2) {
var q=Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
if( q>= 5) {
return true;
}
return false;
}
}
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/23670.html
