With Jake Query we can create Dragonball elements in this example you can see when we click and hold
our mouse button down on the div element we can reposition it anywhere in the browser's content area
in order to do this we'll be working with J query user interface.
As per the J query Web Site J query UI is a widget and interaction library built on top of the J.
Query javascript library it can be used to create highly interactive web applications.
Let's take a look at the script to see how this effect was created.
The first important thing to note is that we've included D.J. query dot UI dot J.S.
script in our head take and this is in addition to our normal J query source script
the UI script is required if you intend to use any of the J query UI interactions as we will be doing
in this lesson next we've created a div element in our body take it did element I has the idea drag
we've created a style sheet in our head take
this defines the appearance of the drag div and you can see it has a with in height of one hundred and
fifty pixels in the background color is blue
our script starts with the document ready function we've also applied the Dragonball perimeter to the
drag div as you can see here this is the perimeter that allows the div to be Dragonball the drag interaction
is only recognized if the J query UI JavaScript file is referenced in the head dead
and so that's all.
That's all that's involved in creating this effect.