保捱科技网
您的当前位置:首页原生JS实现拖拽图片效果_javascript技巧

原生JS实现拖拽图片效果_javascript技巧

来源:保捱科技网
 本文实例为大家讲解了JS实现拖拽图片效果的详细代码,分享给大家供大家参考,具体内容如下

javascript event 对象的clientX,offsetX,screenX,pageX的区别:

用html5的drag来实现拖拽有兼容性问题,使用拖拽插件代码又很多,而这个拖拽demo代码少,并且兼容所有浏览器,很值得在项目中使用,

css样式如下:

 #div1{ 
 width: 100px; height: 100px; 
 background-color: #4D4D4D; 
 position: absolute; cursor: pointer; 
 -webkit-box-shadow: 3px 3px 0px 3px #C7C7C7; 
 box-shadow: 3px 3px 3px 0px #C7C7C7; 
 }
 #parent{ 
 width: 500px; height: 500px; 
 border: 1px solid #CDCDCD; 
 position: relative; margin: 0 auto; //父级元素设置为:
 background-color: #F4F4F4; 
 }
 .postText{
 width: 500px; height: 30px;margin: 0 auto; background-color: #F4F4F4;
 }
 .postText span{ 
 padding:0px 10px;
 }

html代码如下:


 


 移动的距离Top:Left:

js代码及注释如下



        
显示全文