Draggable Interactions with jQuery UI
Lesson 1 of 1
  1. 1
    jQuery UI is a set of common u ser i nterface components, brought together under a single, cohesive API. Due to its ease of use and accessible documentation, this JavaScript library conti…
  2. 2
    A content delivery network (CDN) is a system of interconnected computers designed to serve files to users. The jQuery Foundation provides CDNs which we will be using throughout this lesson. These C…
  3. 3
    jQuery UI interactions are a category of components which add mouse-based behavior to an element. For example, a draggable interaction lets us move elements around with our mouse. To make an eleme…
  4. 4
    Try dragging the queen pieces around again. Notice anything different? Did the mouse always look like that on drag? jQuery UI components are highly customizable. When we create a draggable intera…
  5. 5
    At the end of the last exercise, you got to see the snap option in action. When you set the snap option to true, the selected elements were able to snap to all other draggable elements. We can be a…
  6. 6
    What option would we use if we wanted to constrain the movement of our chess pieces to the board? Take another look at the documentation and make a best guess….
  7. 7
    In the last few exercises we learned that options allow us to configure the properties of an interaction. Now let’s see how events allow us to customize responses to changes on an interaction. An…
  8. 8
    Great job! In this lesson, you learned how to work with jQuery UI to create custom, draggable interactions. Hopefully, you also got comfortable reading jQuery UI’s documentation. You now know how …

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo