jQuery div網格佈局可拖動實現自由佈局
阿新 • • 發佈：2019-06-25
此功能參考http://www.datouwang.com/jiaoben/761.html中的資源，感謝！
頁面效果
拖動後效果
具體實現：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>EasyUI Draggable 測試Demo</title> <link rel="stylesheet" type="text/css" href="homePage/css/jquery.gridster.min.css"> <link rel="stylesheet" href="homePage/css/style.css"> <script type="text/javascript" src="homePage/js/jquery-1.7.2.min.js"></script> <script src="homePage/js/jquery.gridster.js" type="text/javascript"></script> </head> <body> <div class="demo"> <div class="gridster"> <ul> <li data-row="1" data-col="1" data-sizex="5" data-sizey="2"></li> <li data-row="1" data-col="2" data-sizex="5" data-sizey="2"></li> <li data-row="1" data-col="2" data-sizex="5" data-sizey="2"></li> <li data-row="1" data-col="2" data-sizex="5" data-sizey="2"></li> </ul> </div> </div> <script> var gridster; $(function() { gridster = $(".gridster > ul").gridster({ widget_margins : [ 10, 10 ], widget_base_dimensions : [ 150, 140 ], min_cols : 4 }).data('gridster'); }); </script> </body> </html>
案例程式碼下載連結：