http://jsbin.com/hejilomola/edit?html,css,js,output
上面是demo.寻指导 。
function mousemove(ev){
if(ev==null) ev=window.event;//IE
// var xx=$alert.style.left=(ev.clientX-x)+"px";
var ff=0;
if($alert.style.left>ff){
$alert.style.left=(ev.clientX-x)+"px";
}
// console.log(xx);
var yy=$alert.style.top=(ev.clientY-y)+"px";
console.log(yy)
}
谢邀
在其他代码不变的情况下,修改拖拽逻辑,楼主试试把这个函数放到你的代码中,应该可以实现你的要求
function drag(obj) {
var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;
var disX, disY, maxLeft, maxTop, left, top, tempLeft, tempTop;
obj.onmousedown = function (ev) {
maxLeft = (w - obj.offsetWidth);
maxTop = (h - obj.offsetHeight);
ev = ev || event;
disX = ev.clientX - this.offsetLeft;
disY = ev.clientY - this.offsetTop;
document.onmousemove = function (ev) {
ev = ev || event;
tempLeft = ev.clientX - disX;
tempTop = ev.clientY - disY;
if(tempLeft < 0){
left = 0;
}else if(tempLeft >= maxLeft){
left = maxLeft;
}else{
left = tempLeft;
}
if(tempTop < 0){
top = 0;
}else if(tempTop >= maxTop){
top = maxTop;
}else{
top = tempTop;
}
obj.style.left = left + 'px';
obj.style.top = top + 'px';
}
document.onmouseup = function () {
this.onmousemove = this.onmouseup = null;
}
return false;
}
}
drag(document.getElementById('content'));
function mousemove(ev){
if(ev==null) ev=window.event;//IE
var width=300;
var height=100;
var left=(ev.clientX-x);
var top=(ev.clientY-y);
var bodyWidth=document.body.clientWidth;
var bodyHeight=document.documentElement.scrollHeight;
if(left+width>bodyWidth){
left=bodyWidth-width;
}
if(top+height>bodyHeight){
top=bodyHeight-height;
}
left=(left>0) ? left: 0;
top=(top>0)? top :0;
$alert.style.left=(left)+"px";
$alert.style.top=(top)+"px";
}