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 相关文章推荐
JQGrid的用法解析(列编辑,添加行,删除行)
Nov 08 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
Oct 30 Javascript
javascript伸缩型菜单实现代码
Nov 16 Javascript
底部悬浮通栏可以关闭广告位的实现方法
Jun 01 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
关于JavaScript的单双引号嵌套问题
Aug 20 Javascript
JavaScript实现短暂提示框功能
Apr 04 Javascript
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 Javascript
node中实现删除目录的几种方法
Jun 24 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
基于递归实现的php树形菜单代码
2014/11/19 PHP
Codeigniter控制器controller继承问题实例分析
2016/01/19 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
JS控制文本域只读或可写属性的方法
2016/06/24 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
JavaScript requestAnimationFrame动画详解
2017/09/14 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
python根据时间生成mongodb的ObjectId的方法
2015/03/13 Python
Python实现获取操作系统版本信息方法
2015/04/08 Python
python发送HTTP请求的方法小结
2015/07/08 Python
python实现发送和获取手机短信验证码
2016/01/15 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
对命令行模式与python交互模式介绍
2018/05/12 Python
python list转置和前后反转的例子
2019/08/26 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
python中添加模块导入路径的方法
2021/02/03 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
几个常见的消息中间件(MOM)
2014/01/08 面试题
自我评价的正确写法
2013/09/19 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
爱国口号
2014/06/19 职场文书