[javascript学习指南]JavaScript实现图片拖拽效果

【www.bbyears.com--php常用代码】

对于使用JavaScript实现图片拖拽也是现在很多人会遇到的实用操作，那么具体怎么实现图片拖拽呢？实现图片拖拽效果代码是什么？下面我们具体来了解下。

 
 
 









<script>
 var btn=document.getElementById("btn");//获取按钮
 var box=document.getElementById("box");//获取box
 var pbox=document.getElementById("pbox");//获取pbox
 var arr=["#fff143","#ff7500","#a3d900","#eedeb0","#ae7000","#b35c44","#392f41","#ff461f","#44cef6","#edd1db","#003371"];//随机颜色
 //给btn注册点击事件ain
 btn.onclick=function(){
   pbox.innerHTML="";//清空pbo
  for(var i=0;i<=10;i++){
   var newTip =box.cloneNode(true);
   pbox.appendChild(newTip);
   var left=parseInt(Math.random()*(900-100+1) + 100);//随机生成左边距
   var top=parseInt(Math.random()*(500-100+1) + 100);//随机生成上边距
   var bg=Math.floor((Math.random()*arr.length));//生成数组随机数获得随机数组下标
   box.style.background=arr[bg];//设置颜色
   box.style.top=top+"px";//设置上边距
   box.style.left=left+"px";//设置左边距

  }
  var c=pbox.children;

  for(var i=0;i< c.length;i++){
   c[i].onmousedown=function (e) {
//     alert(this.offsetLeft);
    var spacex=e.pageX-this.offsetLeft;
    var spacey=e.pageY-this.offsetTop;
    this.onmousemove=function (e) {
     this.style.left=e.pageX-spacex+"px";
     this.style.top=e.pageY-spacey+"px";
    }
   };
   c[i].onmouseup=function () {
    this.onmousemove=null;
   }
  }
 }
</script>
 

本文来源：http://www.bbyears.com/jiaocheng/136265.html