js实现单元格拖拽效果
程序员文章站
2022-05-12 11:50:14
本文实例为大家分享了js实现单元格拖拽效果的具体代码，供大家参考，具体内容如下 </t...</div>
<div class="content">
<p>本文实例为大家分享了js实现单元格拖拽效果的具体代码，供大家参考，具体内容如下</p>
<div class="jb51code">
<pre class="brush: javascript;">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
position: relative;
}
#box div {
position: absolute;
width: 100px;
height: 100px;
border-radius: 15px;
text-align: center;
line-height: 100px;
font-size: 50px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
//生成结构
var odiv = document.getelementbyid("box");
var ml = mt = 10;
//行列结构
for(var i = 0; i < 3; i++) { //行
for(var j = 0; j < 3; j++) { //列
var adiv = document.createelement("div");
odiv.appendchild(adiv);
adiv.style.left = j * (adiv.offsetwidth + ml) + "px";
adiv.style.top = i * (adiv.offsetheight + mt) + "px";
//背景颜色随机
adiv.style.backgroundcolor = "rgb(" + math.floor(math.random() * 256) + "," + math.floor(math.random() * 256) + "," + math.floor(math.random() * 256) + ")"; //256=(256-0+1)+0;
}
}
//添加文字
var str = "abcdefghi";
var aitems = odiv.children;
for(var i = 0; i < str.length; i++) {
aitems[i].innertext = str[i];
}
//拖拽
for(var i = 0; i < aitems.length; i++) {
aitems[i].onmousedown = function(e) {
var evt = e || event;
var x = evt.offsetx;
var y = evt.offsetx;
var dragnode = this;
var clonenode = dragnode.clonenode();
odiv.replacechild(clonenode, dragnode);
clonenode.style.border = "1px dashed #ccc";
odiv.appendchild(dragnode);
dragnode.style.zindex = 1;
document.onmousemove = function(e) {
var evt = e || event;
var _left = evt.clientx - x;
var _top = evt.clienty - y;
dragnode.style.left = _left + "px";
dragnode.style.top = _top + "px";
return false; //选中,文字也会拖动 去除默认行为
}
document.onmouseup = function() {
var disarr =[];
var newarr =[];
for(var i = 0; i < aitems.length-1; i++) {
var disx = dragnode.offsetleft - aitems[i].offsetleft;
var disy = dragnode.offsettop - aitems[i].offsettop;
var dis= math.sqrt(math.pow(disx, 2) + math.pow(disy, 2));
disarr.push(dis);
newarr.push(dis);
}
disarr.sort(function(a, b) {
return a - b;
});
var minval = disarr[0];
var minindex = newarr.indexof(minval);
dragnode.style.left = aitems[minindex].style.left;
dragnode.style.top = aitems[minindex].style.top;
aitems[minindex].style.left = clonenode.style.left;
aitems[minindex].style.top = clonenode.style.top;
odiv.removechild(clonenode);
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}
}
</script>
</body></pre>
</div>
<p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。</p> </div>
<div class="tags">
相关标签： <a href="/t/js/" target="_blank">
js </a>
<a href="/t/%E6%8B%96%E6%8B%BD/" target="_blank">
拖拽 </a>
</div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/956675.html">
自定义类型：结构体，枚举，联合体 </a>
</p>
<p>
下一篇： <a href="/article/956677.html">
MySQL启动报错问题InnoDB:Unable to lock/ibdata1 error </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2139851.html" target="_blank" title="JS 无限级 Select效果实现代码(json格式)">
<h2>
JS 无限级 Select效果实现代码(json格式) </h2>
</a>
</li>
<li>
<a href="/article/2139599.html" target="_blank" title="js实现做通讯录的索引滑动显示效果和滑动显示锚点效果">
<h2>
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果 </h2>
</a>
</li>
<li>
<a href="/article/2139608.html" target="_blank" title="js/jQuery实现全选效果">
<h2>
js/jQuery实现全选效果 </h2>
</a>
</li>
<li>
<a href="/article/2136720.html" target="_blank" title="JS实现简单的抽奖转盘效果示例">
<h2>
JS实现简单的抽奖转盘效果示例 </h2>
</a>
</li>
<li>
<a href="/article/2136705.html" target="_blank" title="原生JS实现逼真的图片3D旋转效果详解">
<h2>
原生JS实现逼真的图片3D旋转效果详解 </h2>
</a>
</li>
<li>
<a href="/article/2135858.html" target="_blank" title="js实现下拉框效果（select）">
<h2>
js实现下拉框效果（select） </h2>
</a>
</li>
<li>
<a href="/article/2135857.html" target="_blank" title="js实现抽奖效果">
<h2>
js实现抽奖效果 </h2>
</a>
</li>
<li>
<a href="/article/2135776.html" target="_blank" title="js实现一个简单的数字时钟效果">
<h2>
js实现一个简单的数字时钟效果 </h2>
</a>
</li>
<li>
<a href="/article/2135793.html" target="_blank" title="js实现华丽的九九乘法表效果">
<h2>
js实现华丽的九九乘法表效果 </h2>
</a>
</li>
<li>
<a href="/article/2134996.html" target="_blank" title="vue.js实现标签页切换效果">
<h2>
vue.js实现标签页切换效果 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>