You can click, hold, drag them top to bottom or vice versa. To do so, put all the following script inside the tag, right after all the other scripts we have added before.Īt this point, the UI Sortable should already work. This id is used for activating the DOM element to jQuery UI. The id attribute that is attached on the parent element, as shown in the above code snippet, is important.
We can use a or, as long as we wrap them inside a parent element with specific id attribute.Īnd in our case, we are going to use the tag. The HTML structure for jQuery UI Sortable is quite flexible. Recommended Reading: Reviewing CSS Priority Level Step 2: HTML Structure To sum up, here are all the files we link through inside the tag. Put this line inside the head before the style.css we have created previously.
But, I prefer to normalize all the default DOM styles with noremalize.css or else you can also use CSS Reset from Eric Mayer. This next step is optional, you can leave is you want to. Put those scripts inside the or before the closing body tag for better load performance.įurthermore, we will not use the default styles that come with jQuery UI, so we need to create a new CSS file to store our custom styles and then link it to our document, as follows. Step 1: Preparing Essential Filesīefore we start working on the code, we need to prepare a few essential things, including: the jQuery, the jQuery UI library, and the FontAwesome to deliver the icon we are going to use later on.įor the jQuery and the jQuery UI library, you don’t have to host them on your own, the better, practical way is to link them from CDN, as follow: The following is how the final result will look like. This particular plugin will enable a group of DOM to be sortable, meaning that we are able to move the object from one to another position. Today we will continue our exploration on jQuery UI in theming jQuery UI Sortable.
#Jquery ui browser specific how to#
We have covered how to give custom style to jQuery UI, starting from the UI Accordion, UI Slider and the UI Date Picker.