Javascript简单实现可拖动的div

代码如下:

<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>

赞 (0)

相关推荐

  • js实现当复选框选择匿名登录时隐藏登录框效果

    js实现当复选框选择匿名登录时隐藏登录框效果

    本文实例讲述了js实现当复选框选择匿名登录时隐藏登录框效果.分享给大家供大家参考.具体如下: 本技巧是比较常见的,有些网站可以登录发帖或匿名发帖,当勾选复选框选择匿名发帖时,登录框自动隐藏了,是不是更人性化了?这其实是在表单元素上稍微加了一点JavaScript代码,具体实现方法请查看代码. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-checkbox-nm-login-submit-codes/ 具体代码如下: <title>当复

  • javascript div 弹出可拖动窗口

    /* * 创建弹出div窗口. 1.接口说明:DivWindow(id,title,width,height,content) 构造函数,创建一个弹出窗口对象 参数:id 弹出窗口id: title:弹出窗口标题名称: width:弹出窗口宽度 height:弹出窗口高度 content: 弹出窗口显示内容 2.接口说明: closeDivWindow(id) 关闭窗口 参数: id 弹出窗口id 3.接口说明:setPopupTopTitleFontColor(PopupTopTitleFon

  • JS+CSS实现可拖动的弹出提示框

    本文实例讲述了JS+CSS实现可拖动的弹出提示框.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&

  • javascript之可拖动的iframe效果代码

    // HISTORY// ------------------------------------------------------------------// Jan 23, 2004: Fixed problems which caused the script not to work in//               some framed situations. Improved browser support.//               Added easier "addH

  • js 可拖动列表实现代码

    js 可拖动列表实现代码

    补充一点: 要禁止移动中选中文字,FF可以设置CSS xxxx{-moz-user-select:none;} 其他的浏览器可以设置 XXXX.onselectstart = function(){return false} 一种实现原理就是点击没目标元素之后,创建一个占位元素(或者复制一份目标元素,即拷贝B),然后拖动目标元素(或者复制的来的新元素B): 找到相应的位置之后,插入目标元素.清除占位元素或者B. 比如有一个列表: 复制代码 代码如下: <!DOCTYPE html PUBLIC

  • js实现完美拖拽效果可拖动层与回放拖动规迹并显示拖动距离参数

    完美拖拽 html,body{overflow:hidden;} body,div,h2,p{margin:0;padding:0;} body{color:#fff;background:#000;font:12px/2 Arial;} p{padding:0 10px;margin-top:10px;} span{color:#ff0;padding-left:5px;} #box{position:absolute;width:300px;height:150px;background:#

  • javascript html5 canvas实现可拖动省份的中国地图

    javascript html5 canvas实现可拖动省份的中国地图

    本文实例分享了html5 canvas可拖动省份的中国地图实现方法,供大家参考,具体内容如下 1.数据获取 画地图需要省份边界坐标,理论上可以每次都用百度API获取数据并绘图,但为了增加效率,首先将所有坐标都获取下来并存入数据库中. 新建省份数据数组 复制代码 代码如下: var allZoneData = [{'name':'辽宁省','been':'yes','id':'01'},<span style="font-family: Arial, Helvetica, sans-seri

  • 原生js实现可拖动的登录框效果

    实现原理 1.onmousemove事件触发时不断更新鼠标的pageXY改变位置, 登陆框的偏移量=鼠标当前位置-鼠标到登录框边框的距离 2.onmousedown鼠标摁下时触发事件获取鼠标到登陆框的距离,再设置true允许拖拽 3.onmouseup 鼠标弹起设置false停止拖拽 4.登录框居中显示公式:(可视区域宽高-登录框宽高)/2 5.当浏览器窗口大小变化时触发事件window.onresize 再更新登陆框居中显示 代码中有详细的注释 完整代码 <!DOCTYPE html PUBL

  • js实现可拖动DIV的方法

    随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的windows8 系统的App都可以用js开发了,大家有时间可以去尝试一下. 现在切入正题,说一下js 实现可拖动Div.实现这个功能我们先说一下思路: 1.捕捉鼠标div的mousedown事件 2.捕捉 document的   mousemove事件 3.取消事件 然后我们看一下代码: 复制代码 代码如

  • 原生JS可拖动弹窗效果实例代码

    原生JS可拖动弹窗效果实例代码

    这个代码不是我原创的,只是最近想学自己做一个很漂亮的弹窗,自己本来是不会怎么写的,所以上网去找了下,感觉这个不错,很简单,很实用,入门很棒.我就改了下,使逻辑性和可读性更好. 原作者已不可考.感谢原作者,阿门. 复制代码 代码如下: <html>    <head>        <meta http-equiv="Content-Type"content="text/html; charset=gb2312"/>       

  • html+javascript实现可拖动可提交的弹出层对话框效果

    html+javascript实现可拖动可提交的弹出层对话框效果

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JAVASCRI

随机推荐