基于JS怎样实现图片拖曳，代码怎样写-群英

上一篇：JS中mouseDown和mouseUp事件的使用技巧是什么下一篇：ofixed与round方法的定义和用法是什么，有何不同

关于“基于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="随机生成">

<div id="pbox">

<div id="box">

</div>

</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>

“基于JS怎样实现图片拖曳，代码怎样写”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业技术相关的知识可以关注群英网络网站，小编每天都会为大家更新不同的知识。

标签： JS图片拖曳

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：JS中mouseDown和mouseUp事件的使用技巧是什么下一篇：ofixed与round方法的定义和用法是什么，有何不同