jquery UI draggable Learning

The draggable in the jquery UI component is a powerful tool that can drag elements in various ways. In its official website http://jqueryui.com/demos/draggable/only some parameters and events were introduced, there is no specific examples to explain. Below I will explain the common use of a higher number of options:

1.axis: Sets the direction of the drag, with a value of ' X ', ' Y ' two. X means drag at the horizontal position, and y means drag in the vertical direction.

2.cancel: Setting prevents dragging on an element. This parameter can optionally drag some elements, or you can loop through the elements and stop dragging.

3.containment: Restrict what frames to drag. The commonly used value is parent, and restrictions can only be dragged in the parent frame. For a frame made up of multiple div, you can use this parameter to restrict the range of the drag only in the parent frame without affecting elements outside of the parent frame.

4.connectToSortable: This parameter can be used in conjunction with sortable in the jquery UI. As the name suggests, dragging related elements can be sorted to adjust the position between elements.

5.drag Event: The set callback function is invoked during the drag process. So we can do some related elements in this callback function, such as dragging the color and brightness of some elements to adjust to achieve a flickering effect.

6.start Event: The event that is triggered when the drag is started. You can then initialize the data in this event that only needs to be displayed in the drag process to reduce the pressure on the database without opening the page.

7.stop Event: The event that ends the drag action, as opposed to the start event. Of course, some extra data can be erased in this event.

Some of the parameters and methods commonly used in the application are these, which will increase and subtract some parameters according to the change of requirement. Technology is always in the second place, the business is the first. There is a business to determine the technology.