2. 程式人生 > >前端拖拽外掛gridster.js介紹與使用示例

前端拖拽外掛gridster.js介紹與使用示例

阿新 • • 發佈：2018-12-23

gridster.js是一款基於jquery的前端拖拽外掛，效果相當的不錯，大家可以先看看Demo(http://gridster.net/#intro)（藍色部分的白塊就是了，可以隨便拖動，娛樂性很強）。

一、更多示例

    gridster.js允許使用者做一些自定義配置（第二節會講到），通過配置可能實現不同的效果和功能，並且可以做一些限制。以下的示例可能在知道如何 使用後才能更好理解，所以放在前面只做一個索引，有的功能不理解也沒關係，gridster只是讓大家知道它可以實現大概以下功能。
（1）動態新增模組（http://gridster.net/demos/adding-widgets-dynamically.html

）：使用add_widget方法，通過陣列建立一個gridster例項，產生的模組自動排列，無需指定相對位置。
（2）自定義模組內滑鼠的拖動區域（http://gridster.net/demos/custom-drag-handle ）：滑鼠點住模組內指定的元素才可以開始拖動，這樣做以免影響模組內其他滑鼠動作，比如超連結。
（3）放大懸停模組（http://gridster.net/demos/expandable-widgets.html）：通過resize_widget方法改變滑鼠懸停模組的大小
（4）通過JSON序列建立gridster例項（http://gridster.net/demos/grid-from- serialize.html
）：通過JSON序列生成一個gridster例項（有了這個方法我們就可以方便的從資料庫讀取使用者的模組位置定義等等）
（5）同一頁面放多個拖拽例項（http://gridster.net/demos/multiple-grids.html ）：通過配置引數namespace在同一個頁面配置多個gridster例項
（6）改變模組大小（http://gridster.net/demos/resize.html ）：可以通過拖動改變模組的大小
（7）改變模組大小時新增不同限制（http://gridster.net/demos/resize-limits.html ）：你可以使用 resize.max_size和resize.min_size配置，以及在模組html當中新增data屬性data-max-sizex、 data-max-sizey、data-min-sizex、data-min-sizey來限制拖動時模組大小的最大最小值。
（8）輸出當前所有模組的位置排布（序列化）（
http://gridster.net/demos/serialize.html ）：通過serialize方法獲取模組的位置資訊，可以當作JSON物件使用（這樣就可以方便的儲存資料）
（9）拖動的回撥函式（http://gridster.net/demos/using-drag-callbacks.html ）：在開始拖動、拖動結束或位置已改變都可以通過回撥函式呼叫相關的動作，實現一些需要的方法。
（10）改變模組大小後的回撥函式（http://gridster.net/demos/using-resize-callbacks.html ）：同上，改變模組大小時的回撥函式，分為開始、改變、結束三個事件。
（11）動態改變gridster例項的寬度（http://gridster.net/demos/dynamic-grid-width.html ）：gridster的列數可以自行定義，這樣你可以把模組使勁的~~~往右邊拖，直到你設定的最大值。

二、如何使用？

使用gridster.js要求引用三個必須的檔案：
1.jquery.js(jQuery檔案，gridster官方不提供下載，不多說了-> http://www.jquery.com )
2.jquery.gridster.js(gridster的主要指令碼)
3.jquery.gridster.css(gridster的樣式檔案)

後面gridster.js官網提供了下載（http://gridster.net/#download ），另外你也可以直接下載最後面的官方示例包 gridster.js.zip（https://github.com/ducksboard/gridster.js/zipball /master，但是請注意，官方示例包裡面沒有jquery，你需要自己放進去，不知道他們故意的還是bug）

下載完了我們就開始用了：
首先html檔案：

HTML程式碼 

1.  <!doctype html>

2.  <html>

3.  <head>

4.          <meta charset="utf-8">

5.          <title>gridster例項</title>

6.          <!-- 呼叫jquery，注意你放置的目錄不要搞錯了哦！ -->

7.          <script src="./js/jquery-1.11.1.min.js" type="text/javascript"></script>

8.          <!-- 呼叫gridster.js和css，注意你放置的目錄不要搞錯了哦！ -->

9.          <script src="./js/jquery.gridster.js" type="text/javascript" charset="utf-8"></script>

10.         <link rel="stylesheet" type="text/css" href="./js/jquery.gridster.css">

11.         <script>

12.                 //通過javascript指令碼來配置拖動例項，隨後我們會講每個配置引數的意義

13.                

14.                 //首先定義一個變數gridster，為了以後呼叫gridster的方法

15.                 var gridster;

16.

17.                 $(function(){

18.

19.                                 gridster = $(".gridster ul").gridster({        //通過jquery選擇DOM實現gridster

20.                                 widget_base_dimensions: [100, 120],        //模組的寬高 [寬,高]

21.                                 widget_margins: [5, 5],        //模組的間距 [上下,左右]

22.                                 draggable: {

23.                                         handle: 'header'        //模組內定義拖動的元素<header>，這裡也支援jquery選擇器，如"span.drag_handle"

24.                                 }

25.                         }).data('gridster');

26.

27.                 });

28.

29.         </script>

30.         <!-- 當然，除了呼叫gridster.js和css，你也要為你的html寫一些自己的style -->

31.         <style>

32.                 .gridster ul{margin:0;}

33.                 .gridster ul li{list-style-type:none;border:1px solid #e0e0e0;}

34.                 .gridster ul li header{background: none repeat scroll 0% 0% #999;display: block;font-size: 20px;line-height: normal;padding: 4px 0px 6px;margin-bottom: 20px;cursor: move;text-align:center;}

35.         </style>

36. </head>

37. <body>

38.         <div class="gridster">

39.                 <ul>

40.                         <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">

41.                                 <!-- 這裡寫了一個header，對應配置裡面的handle，滑鼠落到header上面可以拖，而不是整個塊 -->

42.                                 <header>|||</header>

43.                                 0

44.                         </li>

45.                         <li data-row="1" data-col="3" data-sizex="1" data-sizey="2">

46.                                 <header>|||</header>

47.                                 1

48.                         </li>

49.                         <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">

50.                                 <header>|||</header>

51.                                 2

52.                         </li>

53.                         <li data-row="3" data-col="2" data-sizex="3" data-sizey="1">

54.                                 <header>|||</header>

55.                                 3

56.                         </li>

57.

58.                         <li data-row="4" data-col="1" data-sizex="1" data-sizey="1">

59.                                 <header>|||</header>

60.                                 4

61.                         </li>

62.                         <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">

63.                                 <header>|||</header>

64.                                 5

65.                         </li>

66.                         <li data-row="4" data-col="2" data-sizex="1" data-sizey="1">

67.                                 <header>|||</header>

68.                                 6

69.                         </li>

70.                         <li data-row="5" data-col="2" data-sizex="1" data-sizey="1">

71.                                 <header>|||</header>

72.                                 7

73.                         </li>

74.                         <li data-row="4" data-col="4" data-sizex="1" data-sizey="1">

75.                                 <header>|||</header>

76.                                 8

77.                         </li>

78.

79.                         <li data-row="1" data-col="5" data-sizex="1" data-sizey="3">

80.                                 <header>|||</header>

81.                                 9

82.                         </li>

83.                 </ul>

84.         </div>

85. </body>

86. </html>

OK,儲存。大功告成！（注意：引用的三個檔案不能少哦~）從第17行“$(function(){”開始，即是gridster的配置指令碼，例如“widget_base_dimensions: [100, 120]”，“widget_margins: [5, 5]”這些都是配置引數。現在你可以開啟來看看這個拖動效果了，Oh，買尬的！也會你會發現很不流暢，這個或許是girdster的小bug或者說不完美的地方，如何改進，明天再講！

相關推薦

前端拖拽外掛gridster.js介紹與使用示例

gridster.js是一款基於jquery的前端拖拽外掛，效果相當的不錯，大家可以先看看Demo(http://gridster.net/#intro)（藍色部分的白塊就是了，可以隨便拖動，娛樂性很強）。一、更多示例     gridster.js允許使用者做一些自定義

js實現拖拽外掛

二、JavaScript實現原理簡述在AS3中，使用startDrag()就能實現拖拽，但是js中，卻沒有此方法，但是也是可以實現的，說穿了，挺簡單的。實現拖拽方法不少，我呢，js功力尚淺，只知道一種實現原理。如下：①滑鼠按下+滑鼠移動 → 拖拽②滑鼠鬆開 → 無拖拽③滑鼠偏移 → 拖拽距離用JavaScri

PEG.js 介紹與基礎使用

寫在前面 在介紹 PEG.js 之前，我們先來說下我們為什麼需要它。 假如有這樣一個場景：使用者輸入一句簡單的 sql 查詢語句 select name from user ， 我們的任務是獲取到裡面的列名，表名。在現有工具下，我們第一個想到的就是正則表示式，熟悉的同學應該能很快寫出這樣的正則表示式：

前端分頁外掛 laypage.js laypage.css

分頁外掛使用步驟： 匯入css/js外掛資源放入到js目錄下--------------------------------------- <link rel="stylesheet" href="js/skin/laypage.css">

移動端圖片的觸屏放大縮小和拖拽事件,touch,js實現的

<!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <meta http-equiv="X-UA-Compatible" co

使用jquery.easydrag拖拽外掛的拖拽出界問題

在Iframe框架裡使用了jquery.easydrag.handler.beta2.js外掛，用來拖動DIV塊。 JS程式碼如下：  <script type="text/javascript" src="js/jquery.js"></script&

自定義Jquery拖拽外掛

新增節點，修改樣式 $("body").append("<div>123</div>"); $("body div").attr("id","box") $("body div").css({"background":"red","width"

自建JQuery拖拽外掛

最近由於業務需要，要有拖拽將頁面上控制元件進行一個排序的調整，網上找的控制元件大多不能完美達到預期效果，就自己做了一個小外掛，也記錄一下，畢竟是第一次寫js外掛 外掛程式碼： /** * Created by linxz on 2018/1/8. */ ;(functi

sortable圖片拖拽外掛

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh

JQuery拖拽外掛使用及下載

16/07/08 UPDATE: A new beta version is now available with some bug corrections. Thanks to Randy for the useful feedback! 29/06/08 UPD

拖拽外掛使用說明

使用 初始化draggabilly為一個jQuery外掛 var $draggable = $('.draggable').draggabilly({ // 選項（配置）... })123 使用原生js初始化 var elem = document.querySel

前端網頁列印外掛print.js(可匯出pdf)

在前端開發中，想列印當前網頁的指定區域內容，或將網頁匯出為多頁的PDF，可以藉助print.js實現，該外掛輕量、簡單、手動引入、不依賴其他庫。示範專案github：https://github.com/lemoncool/print-demo。列印或匯出PDF後效果很好，下圖是對比圖： 關於print.

Kafka分割槽機制介紹與示例

Kafka中可以將Topic從物理上劃分成一個或多個分割槽（Partition），每個分割槽在物理上對應一個資料夾，以”topicName_partitionIndex”的命名方式命名，該資料夾下儲存這個分割槽的所有訊息(.log)和索引檔案(.index)，這使得Kafka

如何做出優雅的過渡效果？ Dotween外掛的簡單介紹及示例程式碼

unity裡面做插值動畫的外掛有許多，比較常見的有itween、hotween、dotween。根據大家的反饋和實際體驗來說，dotween外掛在靈活性、穩定性、易用性上都十分突出。這裡簡單介紹下它的用法，並在後文做了一些效果示例，還是不錯的。 所謂”插值動畫“，顧名思義就是在兩個值中插入其他的

上傳外掛webuploader.js的使用示例

注意：一定要注意swf檔案的位置，因為如果swf引用路徑錯誤的話，瀏覽器不會報錯 測試swf必須放在外網，本地伺服器沒用 可以使用runtimeOrder: 'flash',配置項強制瀏覽器使用swf方式 fileNumLimit: 1,配合uploader.rese

執行緒池介紹與示例

對於執行緒任務比較輕量，執行緒請求又比較多的情況，頻繁的建立和銷燬執行緒是非常消耗資源且低效的。這時候，就輪到執行緒池技術大顯身手了。 執行緒池技術可以提高資源的利用率，即使面對突發性的大量請求，也不會產生大量執行緒，造成伺服器崩潰。 一般一個簡單執行緒池至少包含下列

因果圖法的介紹與示例分析【轉載】

nts mat 很難 如果 邊界值 所有 file 試用 有效 一、 黑盒測試：是一種常用的軟件測試方法，它將被測軟件看作一個打不開的黑盒，主要根據功能需求設計測試用例，進行測試。幾種常用的黑盒測試方法和黑盒測試工具有，等價類劃分法、邊界值分析法、因果圖法、決策表法

File Uploader：支援進度顯示與檔案拖拽的多檔案上傳前端JS指令碼

File Uploader的前身是Ajax Upload。按照官方的說法，升級到FileUploader主要是添加了一些新的特性，修正了一些比較嚴重的錯誤。但在我這個使用者看來，二者最大的不同在於：File Uploader不在基於jQuery。另外，File Upload

gridster.js–可拖拽的網格外掛

gridster.js 是一個 jQuery 外掛用來構建直觀的可拖放的佈局，支援多列布局，你還可以動態的新增和刪除表格中的元素。 \ 主要特性 1.只依賴jQuery 2.支援元素的新增和刪除 3.文件比較全 4.擁有測試用例，你可以檢視你的瀏覽器的測試結果

【前端】利用Canvas給圖片新增水印，支援拖拽、編輯、縮放與刪除

利用Canvas給圖片新增水印，支援拖拽、編輯、縮放與刪除。 難點一： 如何在偽元素after“刪除按鈕“上新增點選事件。 通過滑鼠點選位置event中offsetX屬性獲得其偏離元素距離，與元素寬度做比較。若大於元素寬度，則點選在了偽元素上，否則點選到正常元