jquery drag-and-Drop plugin Gridster usage guide

Source: Internet
Author: User

Gridster.js is a jquery based on the front-end drag-and-drop plug-ins, the effect is quite good, we can first look at the demo (http://gridster.net/#intro) (blue part of the white piece is, you can drag, entertainment is very strong).

Gridster.js is a jQuery plug-in used to build intuitive, drag-and-drop layouts that support multiple-column layouts, and you can dynamically add and remove elements from a table.

1.gridster plug-in function

Implements a function similar to the WIN8 magnetic paste drag and drop

2.gridster official Address

http://gridster.net/

The official web site also has plug-ins help and examples, but according to the official instructions, I always in the local test there is such a problem, one is unable to move, the second is in the vicinity of the magnet has a black spot, may be used for positioning. However, if the normal use of the site, should not appear such black spots. The properties and methods of the Gridster Plug-ins are described in detail on the official website.

After a test, finally solved the problem. The effect appears as follows:

3.gridster Use method

1. First reference JS file

?

1 2 3 <script type= "Text/javascript" src= "jquery-1.7.2.min.js" ></script> <script type= "Text/javascript" Src= "Jquery.gridster.js" ></script> <link rel= "stylesheet" type= "Text/css" href= "Style.css"/>

2. CSS to use

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15-16 17 18 19 20 21 22 23 24 25 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 The "border:0;padding:0" and "<style type=" Text/css > handle {border-bottom:1

3. Use of JS code

?

1 2 3 4 5 6 7 8 9 10 11 $ (function () {$ (". Gridster ul"). Gridster ({widget_margins: [5, 5], widget_base_dimensions: [MB], draggable: {hand Le: '. Handle '}}); var Gridster = $ (". Gridster ul"). Gridster (). Data (' Gridster '); });

4. Use of HTML

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19-20 &lt;div class= "Gridster" &gt; &lt;ul id= "reszable" &gt; &lt;li data-row= "1" data-col= "1" data-sizex= "1" data-sizey= "1" &gt;&lt;div class= "Handle" &gt;1&lt;/div&gt;&lt;div class= "small" &gt;&lt;img src= "Test.jpg"/&gt;&lt;/div&gt;&lt;/ Li&gt; &lt;li data-row= "2" data-col= "1" data-sizex= "1" data-sizey= "1" &gt;&lt;div class= "handle" &gt;2&lt;/div&gt;&lt; /li&gt; &lt;li data-row= "3" data-col= "1" data-sizex= "1" data-sizey= "1" &gt;&lt;div class= "handle" &gt;3&lt;/div&gt; &lt;/li&gt; &lt;li data-row= "1" data-col= "2" data-sizex= "2" data-sizey= "1" &gt;&lt;div class= "handle" &gt;4&lt;/div &gt;&lt;/li&gt; &lt;li data-row= "2" data-col= "2" data-sizex= "2" data-sizey= "2" &gt;&lt;div class= "handle" &gt;5&lt;/ Div&gt;&lt;p&gt; like no other JavaScript library, Parsley has a full support for #UX concerns and detailed options. Override almost every parsley default behaviors to fit your exact needs.&lt;/p&gt;&lt;/li&gt; &lt;li data-row= "1" data-col = "4" data-sizex= "1" data-sizey= "1" &gt;&lt;div class= "handle" &GT;6&LT;/DIV&GT;&lt;/li&gt; &lt;li data-row= "2" data-col= "4" data-sizex= "2" data-sizey= "1" &gt;&lt;div class= "handle" &gt;7&lt;/div &gt;&lt;/li&gt; &lt;li data-row= "3" data-col= "4" data-sizex= "1" data-sizey= "1" &gt;&lt;div class= "handle" &gt;8&lt;/ Div&gt;&lt;/li&gt; &lt;li data-row= "1" data-col= "5" data-sizex= "1" data-sizey= "1" &gt;&lt;div class= "handle" &gt;9&lt; /div&gt;&lt;/li&gt; &lt;li data-row= "3" data-col= "5" data-sizex= "1" data-sizey= "1" &gt;&lt;div class= "handle" &gt;10 &lt;/div&gt;&lt;/li&gt; &lt;li data-row= "1" data-col= "6" data-sizex= "1" data-sizey= "1" &gt;&lt;div class= "Handle" &gt; 11&lt;/div&gt;&lt;/li&gt; &lt;li data-row= "2" data-col= "6" data-sizex= "1" data-sizey= "2" &gt;&lt;div class= "handle" &gt;12&lt;/div&gt;&lt;/li&gt; &lt;li data-row= "1" data-col= "7" data-sizex= "1" data-sizey= "1" &gt;&lt;div class= " Handle "&gt;13&lt;/div&gt;&lt;/li&gt; &lt;li data-row=" 2 "data-col=" 7 "data-sizex=" 1 "data-sizey=" 1 "&gt;&lt;div class = "Handle" &gt;14&lt;/div&gt;&lt;/li&gt; &lt;li data-row= "3" data-col= "7" data-sizex= "1 "data-sizey=" 1 "&gt;&lt;div class=" handle "&gt;15&lt;/div&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;

4.gridster usage Instructions

The Gridster plugin is used normally in Chrome and Firefox, and the special Effects display page is normal. But the IE8 display is normal, but the drag effect cannot be displayed.

Now you can open it to see the drag effect, Oh, buy a race! You will find that it is not fluent, this may be a small bug or girdster, how to improve, to speak tomorrow!

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.