原生HTML 拖拽动画

最新推荐文章于 2022-12-30 13:09:00 发布

bear_cab

最新推荐文章于 2022-12-30 13:09:00 发布

阅读量253

点赞数

分类专栏： 2021 新时代文章标签：动画 html5 html

本文链接：https://blog.csdn.net/phone13144830339/article/details/120545867

版权

2021 新时代专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
   <title>dragLabel</title>
   <meta charset="utf-8">
   <style>
       .container{
           width: 910px;
           font-size: 0px;
       }
       .item{
           font-size: 40px;
           color: white;
           width: 300px;
           height: 200px;
           background-color: yellowgreen;
           display: inline-block;
           text-align: center;
           position: absolute;
           cursor: grab;
           transition: left,top;
           transition-duration: 0.6s;
       }
       .item span{
           display: block;
           width: fit-content;
           position: relative;
           top: 50%;
           transform: translateY(-50%);
           margin: 0 auto;
           user-select: none;
       }

   </style>
</head>
<body>
   <div class="container">
       <div class="item" draggable="true"><span>1</span></div>
       <div class="item" draggable="true"><span>2</span></div>
       <div class="item" draggable="true"><span>3</span></div>
       <div class="item" draggable="true"><span>4</span></div>
       <div class="item" draggable="true"><span>5</span></div>
       <div class="item" draggable="true"><span>6</span></div>
       <div class="item" draggable="true"><span>7</span></div>
       <div class="item" draggable="true"><span>8</span></div>
       <div class="item" draggable="true"><span>9</span></div>
   </div>
   <script>
       var divs = document.querySelectorAll(".item"),i,div,dragDiv,isMoving = false;
       for(i=0;i<divs.length;i++){
           divs[i].style["background-color"] = getRandomColor();
       }
       document.body.addEventListener("dragover",function(ev){
           ev.preventDefault();
       })
       sortDiv(divs);
       for(i=0;i<divs.length;i++){
           div = divs[i];
           div.addEventListener("dragstart",function(e){
               dragDiv = this;
           })
           div.addEventListener("dragover",function(e){
               if(isMoving || this.isEqualNode(dragDiv)){
                   return;
               }
               if(isPreviousElements(this,dragDiv)){
                   this.parentNode.insertBefore(dragDiv,this.nextSibling);
               }else{
                   this.parentNode.insertBefore(dragDiv,this);
               }
               isMoving = true;
               var st = setTimeout(function(){
                   isMoving = false;
                   clearTimeout(st);
               },600);
               sortDiv(document.querySelectorAll(".item"))
           })
       }

       // 随机生成颜色
       function getRandomColor(){
           return "rgb(" + Math.random()*256 +","+ Math.random()*256+","+ Math.random()*256+")"
       }

       // 判断拖动元素是否在目标元素之前
       function isPreviousElements(sourse, target){
           if(!sourse.previousSibling){
               return false;
           }

           if(target.isEqualNode(sourse.previousSibling)){
               return true;
           }
           return isPreviousElements(sourse.previousSibling, target)
       }

       // 位置排序
       function sortDiv(divs){
           for(var i=0;i<divs.length;i++){
               divs[i].style.top = Math.floor(i/3)*201 + "px";
               divs[i].style.left = (i%3)*301 + "px";
           }
       }

</script>
</body>
</html>

bear_cab

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生HTML 拖拽动画

<!DOCTYPE html><html><head> <title>dragLabel</title> <meta charset="utf-8"> <style> .container{ width: 910px; font-size: 0px; } .item{ font-...
复制链接

扫一扫

专栏目录