1
00:00:00,420 --> 00:00:06,480
With Jake Query we can create Dragonball elements in this example you can see when we click and hold

2
00:00:06,510 --> 00:00:12,720
our mouse button down on the div element we can reposition it anywhere in the browser's content area

3
00:00:16,340 --> 00:00:20,240
in order to do this we'll be working with J query user interface.

4
00:00:20,600 --> 00:00:27,890
As per the J query Web Site J query UI is a widget and interaction library built on top of the J.

5
00:00:27,890 --> 00:00:35,280
Query javascript library it can be used to create highly interactive web applications.

6
00:00:35,370 --> 00:00:39,990
Let's take a look at the script to see how this effect was created.

7
00:00:40,110 --> 00:00:48,210
The first important thing to note is that we've included D.J. query dot UI dot J.S.

8
00:00:50,760 --> 00:00:55,650
script in our head take and this is in addition to our normal J query source script

9
00:00:58,580 --> 00:01:05,160
the UI script is required if you intend to use any of the J query UI interactions as we will be doing

10
00:01:05,160 --> 00:01:16,210
in this lesson next we've created a div element in our body take it did element I has the idea drag

11
00:01:17,660 --> 00:01:20,070
we've created a style sheet in our head take

12
00:01:22,900 --> 00:01:28,600
this defines the appearance of the drag div and you can see it has a with in height of one hundred and

13
00:01:28,600 --> 00:01:31,840
fifty pixels in the background color is blue

14
00:01:37,170 --> 00:01:45,490
our script starts with the document ready function we've also applied the Dragonball perimeter to the

15
00:01:45,490 --> 00:01:55,870
drag div as you can see here this is the perimeter that allows the div to be Dragonball the drag interaction

16
00:01:55,870 --> 00:02:02,380
is only recognized if the J query UI JavaScript file is referenced in the head dead

17
00:02:10,780 --> 00:02:11,540
and so that's all.

18
00:02:11,740 --> 00:02:16,450
That's all that's involved in creating this effect.