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 相关文章推荐
JAVASCRIPT 对象的创建与使用
Mar 09 Javascript
List Installed Hot Fixes
Jun 12 Javascript
JavaScript开发时的五个注意事项
Dec 08 Javascript
jquery和javascript的区别(常用方法比较)
Jul 04 Javascript
javascript实现的闭包简单实例
Jul 17 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
Oct 09 Javascript
JavaScript注册时密码强度校验代码
Jun 30 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 Javascript
VUE动态生成word的实现
Jul 26 Javascript
关于Javascript闭包与应用的详解
Apr 22 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
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
php实现读取超大文件的方法
2014/07/28 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
js截取字符串的两种方法及区别详解
2013/11/05 Javascript
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
详解Vue方法与事件
2017/03/09 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
使用graphics.py实现2048小游戏
2015/03/10 Python
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
C和C++经典笔试题附答案解析
2014/08/18 面试题
简述安装Slackware Linux系统的过程
2012/01/12 面试题
我的祖国演讲稿
2014/05/04 职场文书
英语教师求职信
2014/06/16 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
怒海潜将观后感
2015/06/11 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL
PYTHON InceptionV3模型的复现详解
2022/05/06 Python