用onmousedown,onmousemove,onmouseup
仿照网上例子写的 drap 方法 方法测过没有问题的,但是放在页面上确不行了。
效果地址:原生js拖拽出问题求解 就是拖中间那个头像,帮忙看下谢谢
试过了将其他元素都去除 ##
position:relative
还是不行
将CSS的旋转运动样式去了 也不行
用DIV和IMG都不行
对于posX和posY应该声明在drop函数中,应该声明在mousedown函数内
当拖动时,应该去掉那个margin-left:-80px的属性
当为left和right赋值时,不该再去用e.clientX - L
应该把mouseup绑定事件和mousemove同级,否则会导致点击如果不动,而导致没有解绑mousemove
drap: function(obj) {
obj.onmousedown = function(event) {
var event = event || window.event;
var posX = event.clientX - obj.offsetLeft;//在这儿声明pos
var posY = event.clientY - obj.offsetTop;
document.onmousemove = function(event) {
var event = event || window.event;
var L = event.clientX - posX;
var T = event.clientY - posY;
obj.style.marginLeft = 0;
//console.log(L, T)
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;
obj.style.left = L + "px";//这儿
obj.style.top = T + "px";
}
document.onmouseup = function() {//这儿解绑
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}
}