首页 > 代码库 > 3月25日第三篇

3月25日第三篇

2024-09-10 14:11:12   216人阅读

<!DOCTYPE html> 
<html lang="en"> 
<head>   
  <meta charset="UTF-8">   
  <title>自由拖动</title>  
   <style>      
   *{          
   margin: 0;       
      padding: 0;      
   }        
 div{        
     width: 200px;     
     height: 200px;        
     text-align: center;      
     line-height: 200px;           
     font-family: "微软雅黑";          
     cursor: move;    
     }      
   .free:active,.moveOnX:active,.fragment:active,.container2:active,.fragment3:active{    
         background: #09F;       
  }        
 .free,.moveOnX,.fragment,.container2,.fragment3{      
       background: #fa0;          
       width: 300px;       
       height: 300px;      
   }      
   .container2{    
         width: 200px;         
         height: 200px;     
    }     
    .container,.container3{      
       width: 500px;        
       height: 200px;      
       border: 2px solid red;    
     }       
  .fragment,.fragment3{      
       width: 100px;         
       height: 100px;        
       line-height: 100px;     
    }  
   </style>   
  <script src=http://www.mamicode.com/"JS/jquery.min.js"></script>  
   <script src=http://www.mamicode.com/"JS/draggabilly.pkgd.min.js"></script> 
</head> 
<body>   
  <div class="free">我可以被自由拖动</div>  
   <div class="moveOnX">我只能在X轴上移动</div>   
  <div class="container">       
  <div class="fragment">容器里面移动</div>  
   </div>     <div class="container2">网格移动</div>  
   <div class="container3">     
    <div class="fragment3">把手</div>   
  </div>   
  <script>     
    $(".free").draggabilly();     
    $(".moveOnX").draggabilly({axis:"y"});     
    $(".fragment").draggabilly({containment:true});      
   $(".container2").draggabilly({grid:[50,50]});     
    $(".container3").draggabilly({handle:".fragment3"});  
   </script> 
</body> 
</html>

这是自由拖动的代码。

3月25日第三篇


联系
我们