编程 Javascript

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>

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

js实现拖拽功能

- Author -

13751343826

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js获取url参数的使用扩展实例

Dec 29 Javascript

return false,对阻止事件默认动作的一些测试代码

Nov 17 Javascript

js 获取后台的字段改变 checkbox的被选中的状态代码

Jun 05 Javascript

在页面中js获取光标/鼠标的坐标及光标的像素坐标

Nov 11 Javascript

使用jquery中height()方法获取各种高度大全

Apr 02 Javascript

在for循环中length值是否需要缓存

Jul 27 Javascript

js控制li的隐藏和显示实例代码

Oct 15 Javascript

浅析JavaScriptSerializer类的序列化与反序列化

Nov 22 Javascript

微信小程序 checkbox组件详解及简单实例

Jan 10 Javascript

js return返回多个值,通过对象的属性访问方法

Feb 21 Javascript

Vue页面骨架屏注入方法

May 13 Javascript

react antd实现动态增减表单

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