js实现拖拽功能


Posted in Javascript onMarch 01, 2017

效果图:(红色方块可任意拖动)

js实现拖拽功能

代码如下:

<meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>Document</title>
 <style type="text/css">
 *{
 margin:0;
 padding:0;
 }
 body{
 background:url("img/2345_image_file_copy_1.jpg");
 }
 #d1{
 width:100px;
 height:100px;
 background:red;
 margin-left:300px;
 }
 </style>
 </head>
 <body>
 <div id="d1"></div>
 </body>
 <script>
 window.onload=function(){
 var d1=document.getElementById("d1");
 d1.onmousedown=function(e){
 var mouseX=e.clientX;
 var mouseY=e.clientY;//计算xy
 var pianyiX=mouseX-d1.offsetLeft;
 var pianyiY=mouseY-d1.offsetTop;
 document.onmousemove=function(e){
 var newX=e.clientX-pianyiX;
 var newY=e.clientY-pianyiY;
 d1.style.marginLeft=newX+"px";
 d1.style.marginTop=newY+"px";
 }
 };
 document.onmouseup = function(e){
 document.onmousemove = null ;
 };
 }
 /*
 结果,上面的onmousemove要写在document上,我写在div上导致错误
 */
 </script>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Js 本页面传值实现代码
May 17 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
Nov 20 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
Sep 15 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
JS运动改变单物体透明度的方法分析
Jan 23 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 Javascript
原生js实现的移动端可拖动进度条插件功能详解
Aug 15 Javascript
JS实现拼图游戏
Jan 29 Javascript
js实现下拉菜单效果
Mar 01 #Javascript
JS实现复制功能
Mar 01 #Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 #Javascript
JS三目运算(三元运算)方法详解
Mar 01 #Javascript
vue-router 学习快速入门
Mar 01 #Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
Mar 01 #Javascript
Angular之指令Directive用法详解
Mar 01 #Javascript
You might like
基于mysql的论坛(7)
2006/10/09 PHP
php接口和抽象类使用示例详解
2014/03/02 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
表单元素事件 (Form Element Events)
2009/07/17 Javascript
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
谈谈Jquery中的children find 的区别有哪些
2015/10/19 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
python利用hook技术破解https的实例代码
2013/03/25 Python
python模拟登录百度贴吧(百度贴吧登录)实例
2013/12/18 Python
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
深入讲解Java编程中类的生命周期
2016/02/05 Python
关于Python中异常(Exception)的汇总
2017/01/18 Python
python读取文本中数据并转化为DataFrame的实例
2018/04/10 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
我的五年职业生涯规划
2014/01/23 职场文书
应聘文员自荐信范文
2014/03/11 职场文书
2014年服务员个人工作总结
2014/12/23 职场文书
九年级历史教学反思
2016/02/19 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP