jquery Gridster Drag-and-drop feature Chinese documents

First git connection.

Http://git.oschina.net/alexgaoyh/Draging/blob/master/src/main/webapp/gridster/adding-widgets-dynamically.html

Effect:

1) dynamic Add Module (http://gridster.net/demos/adding-widgets-dynamically.html): Use the Add_widget method to create an Gridster instance from an array, The resulting module is automatically arranged without specifying a relative position.
(2) Customizing the drag area of the mouse within the module (http://gridster.net/demos/custom-drag-handle): the mouse points to the module within the specified elements to start dragging, so as not to affect other mouse actions within the module, such as hyperlinks.
(3) Magnification hover module (http://gridster.net/demos/expandable-widgets.html): Change the size of the mouse hover module by Resize_widget method
(4) Create a Gridster instance from a JSON sequence (http://gridster.net/demos/ grid-from-serialize.html): Generate a Gridster instance from a JSON sequence (with this method we can easily read the user's module location definition from the database, etc.)
(5) Multiple drag instances on the same page (http://gridster.net/demos/multiple-grids.html): Configure multiple Gridster instances on the same page by configuring parameters namespace
(6) Change module size (http://gridster.net/demos/resize.html): Can be dragged to change the size of the module
(7) Add different limits when changing module size (http://gridster.net/demos/resize-limits.html): You can use Resize.max_size and resize.min_size configuration, As well as adding the Data property Data-max-sizex, Data-max-sizey, Data-min-sizex, Data-min-sizey in the module HTML to limit the maximum minimum size of the module when dragging.
(8) Output the position of all current modules (serialization) (http://gridster.net/demos/serialize.html): The Serialize method to obtain the location of the module information, can be used as a JSON object (so that the data can be stored conveniently)
(9) Drag the callback function (http://gridster.net/demos/using-drag-callbacks.html): In the beginning of the drag, drag the end or position has changed can be called through the callback function related actions, to implement some of the required methods.
(10) After changing the module size of the callback function (http://gridster.net/demos/using-resize-callbacks.html): Ibid, change the module size of the callback function, divided into start, change, end three events.
(11) Dynamically change the width of the Gridster instance (http://gridster.net/demos/dynamic-grid-width.html): Gridster The number of columns can be defined by themselves, so you can put the module hard ~ ~ ~ to the right to drag, Until you set the maximum value.




(English Official document: http://gridster.net/#documentation).


1.widget_selector
Example: widget_selector: "Li"
Description: Widget_selector used to configure the HTML element name of a girdster that can be dragged inside a module, and support CSS selectors such as: Widget_selector: "Div.drag >. Items".


2.widget_margins
Example: widget_margins:[10,10]
Description: The margin of the module, the first parameter is the top and bottom margin, the second parameter is the left and right margin.


3.widget_base_dimensions
Example: widget_base_dimensions:[140,140]
Note: The width and height of the base unit of each module, drag or change the size will be changed by this width to one unit.


Autogenerate_stylesheet
Example: Autogenerate_stylesheet:true
Note: The default is true, with console view you will find that the <style> style code is inserted before the head end, presumably [data-col= "1"] {left:10px;}, which determines the relative position of the drag module, if set to false, You will define the location of these modules manually (top and left)


Avoid_overlapped_widgets
Example: Avoid_overlapped_widgets:true
Note: Set to True, do not allow the module overlay, if the position of the two modules (Data-col and Data-row to determine), the program will automatically adjust their position, so as to prevent the module confusion.


Serialize_params
Example: Serialize_params:function ($w, WGD) {return {col:wgd.col, Row:wgd.row, size_x:wgd.size_x, size_y:wgd.size_y}}
Description: Custom configuration serialization format, the return value of this function as an element of the returned array, each module generates an element. Using the Serialize () method to use this configuration, wgd means that the widget Data,gridster through WGD can be directly obtained such as Data-col configuration, but if you want to go to the ID of the module element, we can pass $w.attr ("id" Gets


Draggable.start
Example: Draggable.start:function (event, UI) {}
Description: Drag the function to begin execution


Draggable.drag
Example: Draggable:{drag:function (event, UI) {}}
Description: A function that executes when the mouse moves during dragging


Draggable.stop
Example: Draggable:{stop:function (event, UI) {}}
Description: A function executed after dragging ends


Resize.enabled
Example: Resize:{enabled:false}
Description: False By default, when set to true means that the lower-right corner of the module can be dragged to change the module size


Resize.axes
Example: resize:{axes: [' both ']}
Note: When setting the size of the module, the mouse can move to the x-axis or the y-axis, meaning that you can set the width or height of the module to change, set to X can only change the module width, set to Y can only change the height, set to both height and width can be changed.


Resize.handle_class
Example: Resize:{handle_class: ' Gs-resize-handle '}
Note: When setting change module size, drag the classname of the button, the default is Gs-resize-handle


Resize.handle_append_to
Example: resize:{handle_append_to: '}
Description: Set an element through the CSS selector, this element will be the parent element of the drag button, if not set, the default is the module (that is, the value of Widget_selector)


Resize.max_size
Example: resize:{max_size: [Infinity, Infinity]}
Description: Limit the maximum width and height of the module when changing the module size


Resize.start
Example: Resize:{start:function (E, UI, $widget) {}}
Description: The function that executes when the mouse starts dragging the size


Resize.resize
Example: Resize:{resize:function (E, UI, $widget) {}}
Description: Once the size changes the function that executes


Resize.stop
Example: Resize:{stop:function (E, UI, $widget) {}}
Description: Stop changing the size (releasing the mouse) to execute the function

jquery Gridster Drag-and-drop feature Chinese documents