How to Drag and Drop Using jQuery UI Sortable

example

Hello friends today we gonna learn about How to Drag and Drop Using jQuery UI Sortable. So read this article, How to Drag and Drop Using jQuery UI Sortable step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: How to Drag and Drop Using jQuery UI Sortable

We have covered how to give a custom style to jQuery UI starting from the UI Accordion, UI Slider and the UI Date Picker. Today we will continue our exploration of jQuery UI in theme jQuery UI Sortable.

This particular plugin allows a group of DOMs to be sortable, which means we can move the object from one position to another. The following is how the final result will look like.

Let’s just get started.

back to menu ↑

Step 1: Prepare Essential Files

Before we start working on the code, we need to prepare a few essentials, including: the jQuery, the jQuery UI library, and the FontAwesome to provide the icon we’ll use later.

For the jQuery and jQuery UI library, you don’t just need to host them, the better, practical way is to link them from CDN, as follows:

At this point the Sortable UI should already be working. You can click, hold, drag them from top to bottom or vice versa. However, the presentation still looks white and clear.

back to menu ↑

Step 4: Define new font family

As we mentioned before, we need FontAwesome to provide an icon. Download the package here, extract it and put all the fonts under a folder named font styleAnd put these lines in the style.css to define a new font family in our web document, FontAwesome

@ font-face {font-family: “FontAwesome”; src: url (‘font / fontawesome-webfont.eot’); src: url (‘font / fontawesome-webfont.eot? #iefix’) format (‘eot’), url (‘font / fontawesome-webfont.woff’) format (‘woff’), url (‘font / fontawesome- webfont.ttf ‘) format (‘ truetype ‘), url (‘ font / fontawesome-webfont.svg #FontAwesome ‘) format (‘ svg ‘); font-weight: normal; font-style: normal;}

back to menu ↑

Step 5: Styling the UI Sortable

In this step, we will start styling the UI Sortable by adding background color for the body tag as follows:

body {background-color: # 333;}

Then we specify the fix width of the UI Sortable, put it in the center of the browser window and add some gimmicks like:

.ui-sortable {width: 350px; margin: 50px auto; background color: #ccc; -webkit-box-shadow: 0px 0px 10px 1px rgba (0, 0, 0, .1); box-shadow: 0px 0px 10px 1px rgba (0, 0, 0, .1); list style type: none; padding: 0;}

At this point, our Sortable UI looks like this screenshot below.

back to menu ↑

UI default status

Next, we will set the default styles for the

  • add elements. These styles consist of the background gradient colors, the length of the elements, the borders, the text styles and specifically remove the border for the first child and the last child of the
  • .

    .ui-sortable li.ui-state-default {margin: 0; height: 45px; line-height: 48px; font-size: 1.4em; color: #fff; outline: 0; padding: 0; margin: 0; text-indent: 15px; background: rgb (78,82,91); background: -moz-linear-gradient (top, rgb (78,82,91) 0%, rgb (57,61,68) 100%); background: webkit gradient (linear, top left, bottom left, color stop (0%, rgb (78,82,91)), color stop (100%, rgb (57,61,68))); background: -webkit-linear-gradient (top, rgb (78,82,91) 0%, rgb (57,61,68) 100%); background: -o-linear-gradient (top, rgb (78, 82,91) 0%, rgb (57,61,68) 100%); background: -ms-linear-gradient (top, rgb (78,82,91) 0%, rgb (57,61,68) 100%); background: linear gradient (down, rgb (78,82,91) 0%, rgb (57,61,68) 100%); border-top: 1px solid rgba (255,255,255,2); border -bottom: 1px solid rgba (0,0,0, .5); text-shadow: -1px -1px 0px rgba (0,0,0, .5); font-size: 1.1em; position: relative; cursor: pointer;}. ui-sortable li.ui-state-default: first-child {border-top: 0;}. ui-sortable li.ui-state-default: last-child {border-bottom: 0;}

    After adding those colors, our UI will look better as shown in the following screenshot.

    example

    back to menu ↑

    Placeholder

    No, this is not the temporary attribute for HTML5. The placeholder in the jQuery UI refers to the empty spaces where the DOM element can be placed. In this case, we’ll add this area with a gray background and a dashed border, like so.

    .ui-sortable-placeholder {border: 3px dashed #aaa; height: 45px; width: 344px; background: #ccc;}

    Now when you try to replace the DOM position you should see the area as shown in this screenshot below.

    placeholder

    back to menu ↑

    “Movable” icon

    Finally, we will add an icon to the

  • to indicate that it is movable. To do this we will add this icon via the: after pseudo element and assign only FontAwesome font family.

    .ui-sortable li.ui-state-default: after {content: “f0c9”; display: inline-block; font-family: “FontAwesome”; position: absolute; right: 18px; top: 9px; text-align: center; line height: 35px; color: rgba (255,255,255,2); text shadow: 0px 0px 0px rgba (0,0,0,0); cursor: move;}

    Those are all the codes we need. Finally you can check out the demo and view the source code from the following links. We hope you enjoyed this tutorial

    • Demo
    • Download the source code
    back to menu ↑

    How to Drag and Drop Using jQuery UI Sortable: benefits

    • The How to Drag and Drop Using jQuery UI Sortable tutorial is free .
    • This guide already helps so many users follow up with interest in a timely manner.
    • The price of the How to Drag and Drop Using jQuery UI Sortable guide is free.

    back to menu ↑

    Faq

    Tutorial summary of How to Drag and Drop Using jQuery UI Sortable

    In this guide, we told you about the How to Drag and Drop Using jQuery UI Sortable; please read all steps so that you understand How to Drag and Drop Using jQuery UI Sortable in case if you need any assistance from us, then contact us.

    How this tutorial helping you?

    So in this guide, we discuss the How to Drag and Drop Using jQuery UI Sortable, which undoubtedly helps you.

    What is actual time in which this method complete?

    The time to complete the How to Drag and Drop Using jQuery UI Sortable tutorial is 10+ minutes.

    What are the supported Device?

    PC Laptop or Desktop


    back to menu ↑

    Final note

    I hope you like the guide How to Drag and Drop Using jQuery UI Sortable. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

    For our visitors: If you have any queries regards the How to Drag and Drop Using jQuery UI Sortable, then please ask us through the comment section below or directly contact us.
    Education: This guide or tutorial is just for educational purposes.
    Misinformation: If you want to correct any misinformation about the guide “How to Drag and Drop Using jQuery UI Sortable”, then kindly contact us.
    Want to add an alternate method: If anyone wants to add more methods to the guide How to Drag and Drop Using jQuery UI Sortable, then kindly contact us.
    Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
    Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.

  • Compsmag
    Logo
    Shopping cart