每个人都希望每天都是开心的,不要因为一些琐事扰乱了心情还,闲暇的时间怎么打发,关注图老师可以让你学习更多的好东西,下面为大家推荐javascript拖动小例子,赶紧看过来吧!
【 tulaoshi.com - Web开发 】
html
head
meta http-equiv="Content" content="text/html;chartset=utf-8"
titletest drag/title
style type="text/css"
!--
.drag {
width:100px;
height:100px;
position:absolute;
left:10px;
top:10px;
background-color:blue;
}
--
/style
script type="text/javascript"
!--
function drag(target,event)
{
var deltaX = event.clientX-parseInt(target.style.left);
var deltaY = event.clientY-parseInt(target.style.top);
document.attachEvent("onmousemove",movehandle);
document.attachEvent("onmouseup",uphandle);
function movehandle()
{
target.style.left = event.clientX-deltaX;
target.style.top = event.clientY-deltaY;
}
function uphandle()
{
document.detachEvent("onmousemove",movehandle);
document.detachEvent("onmouseup",uphandle);
}
}
--
/script
/head
body
div id="drag1" class="drag" style="left:10px;top:10px;background-color:red;" onmousedown="drag(this,event);" show me you 2/div
div id="drag" class="drag" onmousedown="drag(this,event);" style="left:10px;top:10px;"show me you/div
/body
/html
来源:http://www.tulaoshi.com/n/20160219/1621508.html
看过《javascript拖动小例子》的人还看了以下文章 更多>>