使用Gridster. js Plugin实现图片拖拽功能cid1049 -网页前端设计

作者code


html and css

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <style>
  8. body {
  9. background: #34495e;
  10. overflow: hidden;
  11. }
  12. li {
  14. list-style: none;
  15. cursor: pointer;
  16. background-size: cover;
  17. }
  18. li:nth-child(1){
  19. background-image: url(one.jpg);
  21. }
  23. li:nth-child(2){
  24. background-image: url(006.jpg);
  25. }
  26. li:nth-child(3){
  27. background-image: url(two.jpg);
  28. }
  30. li:nth-child(4){
  31. background-image: url(one.jpg);
  32. background-size: cover;
  33. background-position: center;
  35. }
  36. li:nth-child(5){
  37. background-image: url(3.jpg);
  38. background-size: cover;
  39. background-position: center;
  40. }
  42. li:nth-child(6){
  43. background-image: url(001.jpg);
  44. background-size: cover;
  45. background-position: center;
  46. }
  48. li:nth-child(7){
  49. background-image: url(6.jpg);
  50. background-size: cover;
  51. background-position: center;
  52. }
  53. li:nth-child(8){
  54. background-image: url(002.jpg);
  55. background-size: cover;
  56. background-position: center;
  57. }
  58. li:nth-child(9){
  59. background-image: url(008.jpg);
  60. background-size: cover;
  61. background-position: center;
  62. }
  63. li:nth-child(10){
  64. background-image: url(003.jpg);
  65. background-size: cover;
  66. background-position: center;
  67. }
  70. li:nth-child(11){
  71. background-image: url(004.jpg);
  72. background-size: cover;
  73. background-position: center;
  74. }
  76. li:nth-child(12){
  77. background-image: url(006.jpg);
  78. background-size: cover;
  79. background-position: center;
  80. }
  89. .gridster{
  90. position:relative
  91. }
  92. .gridster>*
  93. {
  94. margin:0 auto;
  95. transition:height .4s,width .4s}
  97. .gridster .gs-w{
  98. z-index:2;
  99. position:absolute
  100. }
  106. .ready .gs-w:not(.preview-holder)
  107. {
  108. transition:opacity .3s,left .3s,top .3s
  110. }
  115. .ready .gs-w:not(.preview-holder),
  116. .ready .resize-preview-holder
  117. {
  118. transition:opacity .3s,left .3s,top .3s,width .3s,height .3s
  120. }
  122. .gridster .preview-holder
  123. {
  124. z-index:1;
  125. position:absolute;
  126. background-color:#fff;
  127. border-color:#fff;
  128. opacity:.3
  130. }
  133. .gridster .player-revert
  134. {
  135. z-index:10!important;
  136. transition:left .3s,top .3s!important
  137. }
  139. .gridster .dragging,.gridster .resizing{
  140. z-index:10!important;
  141. transition:all 0s!important;
  143. }
  144. .gs-resize-handle{position:absolute;z-index:1}
  146. .gs-resize-handle-both{
  147. width:20px;
  148. height:20px;
  149. bottom:-8px;
  150. right:-8px;
  151. }
  153. .gs-resize-handle-x{
  154. top:0;
  155. bottom:13px;
  156. right:-5px;
  157. width:10px;
  158. cursor:e-resize}
  160. .gs-resize-handle-y{
  161. left:0;
  162. right:13px;
  163. bottom:-5px;
  164. height:10px;
  165. cursor:s-resize}
  167. .gs-w:hover .gs-resize-handle,
  168. .resizing
  169. .gs-resize-handle{opacity:1}
  170. .gs-resize-handle,
  171. .gs-w.dragging
  172. .gs-resize-handle
  173. {opacity:0}
  177. .gs-resize-disabled
  178. .gs-resize-handle{display:none!important}
  179. [data-max-sizex="1"]
  181. .gs-resize-handle-x,[data-max-sizey="1"]
  183. .gs-resize-handle-y,[data-max-sizey="1"][data-max-sizex="1"]
  185. .gs-resize-handle{display:none!important}
  187. </style>
  188. </head>
  189. <body>
  190. <br><br><br><br><br><br><br><br>
  191. <div class="gridster">
  192. <ul>
  193. <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
  194. <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
  195. <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>
  197. <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
  198. <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>
  200. <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
  201. <li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
  202. <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>
  204. <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
  205. <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>
  207. <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
  208. <li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>
  209. </ul>
  210. </div>
  212. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  214. <script src="jquery.gridster.min.js"></script>
  215. <script>
  216. $(function(){ //DOM Ready
  218. $(".gridster ul").gridster({
  219. widget_margins: [10, 10],
  220. widget_base_dimensions: [140, 140],
  221. min_cols: 6,
  222. resize: {
  223. enabled: true,
  224. max_size: [2, 2],
  225. min_size: [1, 1]
  226. }
  227. });
  229. });
  230. </script>
  231. </body>
  232. </html>
  <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style>
     
     body {
         background: #34495e;
         overflow: hidden;
}
li {
  
  list-style: none;
  cursor: pointer;
    background-size: cover;
}
         li:nth-child(1){
             background-image: url(one.jpg);
              
         }
         
         li:nth-child(2){
             background-image: url(006.jpg);
         }
         li:nth-child(3){
             background-image: url(two.jpg);
         }
         
         li:nth-child(4){
             background-image: url(one.jpg);
             background-size: cover;
             background-position: center;
            
         }
          li:nth-child(5){
             background-image: url(3.jpg);
             background-size: cover;
             background-position: center;
         }
         
          li:nth-child(6){
             background-image: url(001.jpg);
             background-size: cover;
             background-position: center;
         }
         
          li:nth-child(7){
             background-image: url(6.jpg);
             background-size: cover;
             background-position: center;
         }
           li:nth-child(8){
             background-image: url(002.jpg);
             background-size: cover;
             background-position: center;
         }
           li:nth-child(9){
             background-image: url(008.jpg);
             background-size: cover;
             background-position: center;
         }
            li:nth-child(10){
             background-image: url(003.jpg);
             background-size: cover;
             background-position: center;
         }
         
         
           li:nth-child(11){
             background-image: url(004.jpg);
             background-size: cover;
             background-position: center;
         }
         
           li:nth-child(12){
             background-image: url(006.jpg);
             background-size: cover;
             background-position: center;
         }
         
         
         
         
         
         
         
 
.gridster{
    position:relative
    }
.gridster>*
         {
         margin:0 auto;      
         transition:height .4s,width .4s}
         
         .gridster .gs-w{
             z-index:2;
             position:absolute
         }
         
         
         
         
         
             .ready .gs-w:not(.preview-holder)
             {
                 transition:opacity .3s,left .3s,top .3s
         
              }
         
         
         
         
               .ready .gs-w:not(.preview-holder),
               .ready .resize-preview-holder
               {                   
                   transition:opacity .3s,left .3s,top .3s,width .3s,height .3s
         
              }
          
                .gridster .preview-holder  
                   {
                       z-index:1;
                       position:absolute;
                       background-color:#fff;
                       border-color:#fff;
                       opacity:.3
         
                   }
         
         
         .gridster .player-revert
         {
             z-index:10!important;             
             transition:left .3s,top .3s!important
         }
         
          .gridster .dragging,.gridster .resizing{
              z-index:10!important;                 
              transition:all 0s!important;
         
         }
           .gs-resize-handle{position:absolute;z-index:1}
         
         .gs-resize-handle-both{
             width:20px;
             height:20px;
             bottom:-8px;
             right:-8px;
            }
         
         .gs-resize-handle-x{
          top:0;
          bottom:13px;
          right:-5px;
          width:10px;
          cursor:e-resize}
         
         .gs-resize-handle-y{
             left:0;
             right:13px;
             bottom:-5px;
             height:10px;
             cursor:s-resize}
         
         .gs-w:hover .gs-resize-handle,
         .resizing 
         .gs-resize-handle{opacity:1}
         .gs-resize-handle,
         .gs-w.dragging 
         .gs-resize-handle
         {opacity:0}
         
         
         
         .gs-resize-disabled 
         .gs-resize-handle{display:none!important}
         [data-max-sizex="1"] 
         
         .gs-resize-handle-x,[data-max-sizey="1"] 
         
         .gs-resize-handle-y,[data-max-sizey="1"][data-max-sizex="1"] 
         
         .gs-resize-handle{display:none!important}

 </style>
 </head>
 <body>
    <br><br><br><br><br><br><br><br>
     <div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>
 
        <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
        <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>
 
        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
        <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>
 
        <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
        <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>
 
        <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>
    </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="jquery.gridster.min.js"></script>
<script>
     $(function(){ //DOM Ready
 
    $(".gridster ul").gridster({
        widget_margins: [10, 10],
        widget_base_dimensions: [140, 140],
        min_cols: 6,
        resize: {
            enabled: true,
            max_size: [2, 2],
            min_size: [1, 1]
          }
    });
 
});
</script>
 </body>
 </html>

在线演示? 让链接同时具备两种打开方式

获取源码: Gridst9er.js
下载数:79人次, 文件大小: 665.8 KB, 上传日期: 2020年-11 月-25日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

2,377 人查阅

类似文章