教程集 > 脚本编程 > javascript > 正文 javascript简单拖拽效果代码

javascript简单拖拽效果代码

发布时间：2016-11-27 编辑：jiaochengji.com

教程集为您提供javascript简单拖拽效果代码等资源，欢迎您收藏本站，我们将为您提供最新的javascript简单拖拽效果代码资源

拖拽效果就是我们可以托运页面上的各种层，下面我来给大家介绍一个原生拖拽效果js代码，各位朋友可参考。

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生javascript效果：简单拖拽 </title> <style type="text/css"> #con {width:200px; height:100px; padding:10px; position:absolute; background:#333; color:#fff;} /* YUI reset */ * {margin:0; padding:0;} /* body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0;padding:0;} */ table {border-collapse:collapse;border-spacing:0;} fieldset,img { border:0;} address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;} ol,ul,li {list-style:none;} caption,th {text-align:left;} h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;} q:before,q:after {content:'';} abbr,acronym { border:0;} /* my */ .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {*zoom:1;} body {color:#333; font-size:12px; font-family:Verdana,Arial,Helvetica,sans-serif;} a {text-decoration:none; color:#333;} a:hover {text-decoration:underline;} .wrapper {width:600px; margin:0 auto; padding-bottom:50px;} .ad {width:468px; margin:10px auto 0;} .ad li {padding-top:5px;} h1 {height:50px; line-height:50px; font-size:22px; font-weight:normal; font-family:"Microsoft YaHei",SimHei;} .download {display:inline-block; height:34px; line-height:34px; padding:0 10px; background:#333; font-size:14px; font-weight:bold; text-align:center; color:#fff; border:1px solid #999; margin-top:10px;} .fenxiang {height:16px; padding:20px 0 10px; margin-bottom:10px;} .shuoming {margin-top:20px; border:1px solid #ccc; padding-bottom:10px;} .shuoming dt {height:30px; line-height:30px; font-weight:bold; text-indent:10px;} .shuoming dd {line-height:20px; padding:5px 20px;} .shuoming dd a {text-decoration:underline;} .tongji {display:none;} </style> <script type="text/javascript"> window.onload=function () { var oCon = document.getElementById("con"); var disX = 0; var disY = 0; oCon.onmousedown = function (ev) { var oEvent = ev || event; disX = oEvent.clientX - oCon.offsetLeft; disY = oEvent.clientY - oCon.offsetTop; document.onmousemove = function (ev) { var oEvent = ev || event; var l = oEvent.clientX - disX; var t = oEvent.clientY - disY; if (l<0) { l = 0; } else if (l>document.documentElement.clientWidth - oCon.offsetWidth) { l = document.documentElement.clientWidth - oCon.offsetWidth; } if (t<0) { t = 0; }else if (t>document.documentElement.clientHeight - oCon.offsetHeight) { t = document.documentElement.clientHeight - oCon.offsetHeight; } oCon.style.left = l 'px'; oCon.style.top = t 'px'; }; document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; } return false; }; }; </script> </head> <body>

<h1>原生javascript效果：简单拖拽</h1>

mming 简单拖拽示例

</body> </html></textarea>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
jQuery 版元素拖拽原型代码
 简单的jquery拖拽排序效果实现代码
 jquery实现简单的拖拽效果实例兼容所有主流浏览器
 HTML5 DragEvent接口的实例讲解
 H5实现拖拽排序的代码
 使用h5实现react拖拽排序组件的方法（附代码）
jquery div拖拽效果(兼容浏览器)
javascript简单拖拽效果代码
 如何使用jQuery Draggable和Droppable实现拖拽功能

上一篇：原生javascript选项卡切换效果代码下一篇：js 鼠标点击窗口或浮动层以外关闭层

[关闭]

javascript简单拖拽效果代码

最近更新

浏览排行