Javascript简单实现可拖动的div
更新时间：2013年10月22日 17:31:40 作者：
实现div拖动有很多方法，不过目前比较常见的就是使用javascript实现的了，下面有个不错的示例，大家可以尝试操作下
复制代码 代码如下:
<html>
<head>
<script type="text/javascript">
var x;
var y;
function $(id)
{
return document.getElementById(id)
}
function mousedown()
{
x=event.clientX-$("px").style.pixelLeft;
y=event.clientY-$("px").style.pixelTop;
$("px").style.border="2px solid red";
$("px").onmousemove = mousemove;
}
function mouseup()
{
$("px").onmousemove = "";
$("px").style.border="";
}
function mousemove()
{
$("px").style.pixelLeft=event.clientX-x;
$("px").style.pixelTop=event.clientY-y;
}
</script>
</head>
<body>
<div id="px" style="position:absolute; left:100px; height:100px; width:100px; background-color:#FF0;"
onmousedown="mousedown()" onmouseup="mouseup()" >
</div>
</body>
</html>
相关文章
这篇文章主要介绍了JS工厂模式开发,结合具体实践案例形式分析了基于javascript工厂模式实现的轮播功能相关操作技巧,需要的朋友可以参考下2019-10-10
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法，需要的朋友可以参考下。2011-04-04
为Javascript中的String对象添加去除左右空格的方法(示例代码)
这篇文章主要介绍了为Javascript中的String对象添加去除左右空格的方法(示例代码)。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
这篇文章主要给大家分享介绍了一个QQ跳转支付宝并自动领红包脚本，这个脚本应该是最新的，测试后是可以使用的，文中给出了完整的示例代码和使用方法，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧2018-06-06
这篇文章主要介绍了微信小程序HTTP接口请求封装代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
JavaScript ES6的新特性使用新方法定义Class
这篇文章主要介绍了JavaScript ES6的新特性使用新方法定义Class 的相关资料,需要的朋友可以参考下2016-06-06
使用事件委托技术能让你避免对特定的每个节点添加事件监听器；相反，事件监听器是被添加到它们的父元素上2014-04-04
下面对iframe的所有操作都是在同一个域下进行，暂不考虑跨域调用2009-10-10
今天小编就为大家分享一篇layui 监听表格复选框选中值的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了JS实现点星星消除小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
最新评论