JS实现图片在网页中被拖拽

来源：咤帕游戏

这次给大家带来JS实现图片在网页中被拖拽，JS实现图片在网页中被拖拽的注意事项有哪些，下面就是实战案例，一起来看一下。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 #pbox{
 width: 100%;
 height:100%;
 }
 #box{
 width: 200px;
 height: 200px;
 background:red;
 position: absolute;
 }
 </style>
</head>
<body>
<input type="button" id="btn" value="随机生成">
<p id="pbox">
<p id="box">
</p>
</p>
</body>
<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>
</html>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！