按坐标来判断是否拖动
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 = 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;
}
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("没拖动过");
}
})
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;
}
}