Many times we do encounter site JS drag the needs of today as a small drag JS case write native code in accordance with a pop-up box.
According to the above demand we started making a drag effect of it.
The first step, we have to write a css layout and response
<div the above mentioned id = "Box"> <div the above mentioned id = "btn"> Title </ div> <the p-> Green Spengler front-end blog! </ P> <P> www.cenggel.com </ P> </ div>
<style>
#box{ height:200px; width:200px; background:#999; position:absolute;} #btn{ height:30px; background:#000; cursor:all-scroll; padding:0 10px; color:#fff;}</style>
Here, then we id = btn drag of a region. http://www.360doc.com/showweb/0/0/860281883.aspx
Second, logic tells
JS entire code is not a lot, when the mouse down time and acquires id = location of the mouse on the box and left margins, then calculate the current position.
This time is then calculated the position of the mouse when the mouse is moved again, and then to a position id = box
When the mouse button is released and the onmousemove onmouseup cleared
Three, JS code portions
<script type="text/javascript">
function drag(obtnf,obtn){ //按钮及初始值
var obtn = document.getElementById(obtn),
obtnf = document.getElementById(obtnf),
disX = 0,
disY = 0; //鼠标按下时开始计算
obtn.onmousedown = function(ev){ var ev = ev || window.event;
disX = ev.clientX - obtnf.offsetLeft;
disY = ev.clientY - obtnf.offsetTop; //鼠标按下并移动时计算
document.onmousemove = function(ev){ var ev = ev || window.event;
obtnf.style.left = ev.clientX - disX + 'px';
obtnf.style.top = ev.clientY - disY + 'px';
}; //鼠标松开时清除时间
document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null;
}; return false;
};
}; //引用
drag("box","btn")</script> www.gendan5.com
最后咱们的效果如下
做到这里其实咱们的效果并不完美，应为当我们拖拽的时候发现，他能直接被拖到浏览器的外面去了，所以咱们再给他加点限制。
最终JS代码如下：
<script type="text/javascript">
function xianzhi(val,max,min){ if (val > max){ return max;
}else if(val < min){ return min;
}else{ return val;
} console.log(val)
} function drag(obtnf,obtn){ //按钮及初始值
var obtn = document.getElementById(obtn),
obtnf = document.getElementById(obtnf),
disX = 0,
disY = 0; //鼠标按下时开始计算
obtn.onmousedown = function(ev){ var ev = ev || window.event;
disX = ev.clientX - obtnf.offsetLeft;
disY = ev.clientY - obtnf.offsetTop; //鼠标按下并移动时计算
document.onmousemove = function(ev){ var ev = ev || window.event; var lefts= (ev.clientX - disX),
tops= (ev.clientY - disY),
maxle= (document.documentElement.clientWidth - obtnf.offsetWidth),
maxto= (document.documentElement.clientHeight - obtnf.offsetHeight)
lefts = xianzhi(lefts,maxle,0)
tops = xianzhi(tops,maxto,0)
obtnf.style.left = lefts + 'px';
obtnf.style.top = tops + 'px';
}; //鼠标松开时清除时间
document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null;
}; return false;
};
}; //引用
drag("box","btn")
做到这里一个小型的拖拽效果就出来了。郑州不孕不育医院：http://yyk.39.net/zz3/zonghe/1d427.html