Summary: In this video, we will continue our discussion of jQuery UI. We will discuss resizable and draggable. Starting with resizable, the idea is very simple. We start with a div on the page. We enhance it a bit with css. Then we call the resizable() function on that div and that will make the div resizable on the screen (vertically, horizontally, or both ways).
In the case of draggable, we added couple of divs on the screen. We changed their sizes and placed them on the left and right of the browser using css. Then we implemented the draggable and droppable functionalities by adding the following events: drag, step, and drop. Dragging will change the opacity of the div. When we drop it, we change the ui class for the target div and its text.
Technology Used: jQuery UI and Visual Studio 2010
Keyword: jQuery UI, Visual Studio 2010, resizable, draggable, droppable, start, drag, step, drop, addClass, find.
Transcript:Welcome back everyone. This is Ayad Boudiab. I'm a Senior .NET application developer. We have been discussing jQuery UI. In the first set of videos I explained to you the UI widgets that we can use. In the next set I explained to you some of the effects that we can use with the jQuery UI. And in this set I'd like to explain to you a few items as far as dragging, dropping, selecting, sorting, and resizing some of the elements that you can see with the jQuery UI. I'm going to split that into two videos, and in the first video I'd like to explain the resizable and the draggable; and then in the second set I'd like to explain the selectable and the sortable. And we see how we can work with that.
Now, let's go ahead first and get started with the resizable option. OK? I have my HTML page as you see over here. On the page I have my links to the CSS and I have the scripts that I want to use in my code. The CSS is in the Dark Hive folder, that we uploaded from the jQuery UI website. It's called Custom CSS. This is where we use most of the CSS that you see on the screen. For example, if you scroll down here, you will notice that for the DIV in here, named 'X', I have a class called 'UI Widget Content'. This UI Widget Content is coming from this custom CSS that you're see up here. In order for my code to work, of course, I'd like to have a reference to jQuery and jQuery UI. Both of those are under the JS folder, under the same directory. Underneath that I have a script for the function. This is when the DOM is ready, what you want to do. Right? So this is the code that gets executed to do all the jQuery UI work.
Scroll down here and you end up with a style. Right now the styles are empty. And below it I have a DIV for the class Demo. Within that DIV I have an ID and a class for another DIV with text inside of it. OK? Now I intentionally put in here 'X' to let you know that I can name it any ID I want--any name that I want. I could say 'X' or I could say, for example, 'resizable'. OK? So either way, whatever that ID is, you reference that ID in your code and it would work. So if I name it 'resizable' like you see here, it's not that you have to name it 'resizable', you can name it anything you want. OK. So I have that DIV then for the demo, another DIV with 'resizable' and a paragraph within that. If I try to preview that in the browser, I see a box using that CSS and then here's some text with it.
OK. Now, let's move up one step in here and try to work with the styles. For this style I'm going to change a few things as far as this DIV is concerned. Since it's an ID, 'resizable', I put the pound sign in front of it and I put 'resizable' and here are my options. I'd like to change the width to make it 100 pixels. I also like to change the height, make it 100 pixels. And I will also change the padding and make that 0.5em. That gives me the box that I'd like to use, as far as the sizable DIV is concerned. But before I finish in here I'd like to do one more thing. For the resizable, I need to change the 'P', which is the paragraph within the sizable, that's the one over here, I'd like to change the text decoration on this one, or the text alignment, I'm sorry. For this text alignment I'm going to make that 'center.' You'll notice that Visual Studio gives me the options that I'd like to use, to make that simple for me. And as a matter of fact, let me bring up one point up before I proceed. I'm using here Visual Studio 2010 because I'm comfortable using Visual Studio. I don't have to use Visual Studio. In other words, you could load Notepad and type all of this code in Notepad and you'd be able to do and view the same code and the same pages like we're doing here. You don't have to have Visual Studio. OK. So please keep that in mind. You don't have to purchase Visual Studio 2010 to do this work. You could do it in Notepad. Or you can download any development environment that you have for free on the internet.
So by changing the style on this DIV, now if I try to view that in the browser, it would look something like this, with height and the text centered and so on. OK. Now, the purpose of our video is to make this one resizable. So, how simple can that be? I could, in order for me to get to the actual element, the actual DIV, what I need to do is '#resizable', that's the actual DIV. I referenced that DIV, so now I have access to that DIV. Then I call the 'resizable' function on it. By simply doing so, now I just made that DIV resizable. Let's illustrate that by viewing that in the browser. You'll notice the DIV is the same thing, but you notice those dashes in the corner. I can re-size that vertically, I can re-size that horizontally, or I can re-size that both ways. And since I aligned the text to the center, you'll notice that the text is moving with me to be centered in that DIV. This simply, calling the 'resizable' on that DIV will make that DIV resizable. That illustrates how we can work with resizables. Now, how can we work with draggables. Draggables is a matter of dragging a certain element on the screen. Right? OK.
Let's see how we can do that. Again, we are in here illustrating the same concept by having the page as a link to the Custom CSS, and a link to the jQuery and jQuery UI. And I have the function to call when the DOM is ready. In the styles I have nothing right now. And within the body I have a DIV for the demo with a couple of DIVs. One says 'draggable', one says 'droppable'. The draggable one uses UI widget content and UI corner all, from the custom CSS that you saw at the top of the page. And the droppable one uses UI widget header and UI corner all, again from the same custom CSS that you saw on the top of the page. If I right-click on this I can view it in a browser and I'll end up with those two. Here's the draggable object, here's the drop location. Let's try to change that CSS a little bit so we can make this so it looks a little bit different.
So in this case then, I'm going to change the draggable and the droppable. Here's the draggable. Inside that I'll put a '#draggable', here's some options that I'd like to add. For the droppable, here's the '#', and here's some options I'd like to add. For the first one I'm going to give it width and height, padding and floating. For the width I'm going to make it 50 pixels. For the height, 50 pixels, padding is .5em and the floating on the left. So it's going to be on the left side of the browser. For the second one, which is the droppable location, I'm going to make that float on the right, but of course I'm going to make it a little bit bigger. So I'll give it a width and a height of 200 pixels. Padding .5em stays the same, and then for the float, I'm going to float that on the right. If I save this and then try to preview it in the browser I'll end up with something like this. Here's the draggable object and here's a drop location.
Now let's go to the function inside jQuery when the DOM is ready, what do you want to happen? OK. So, I have the draggable and the droppable. I need to reference that '$#' that's the draggable. That gives me access to the draggable. I'm going to call the '.draggable' on it. OK? For the second one, for the droppable, I'm going to do the same thing. '$#droppable'. That references that and make it droppable. Now, by simply doing the draggable on the object I should be able to drag that object around. And I can. But for the droppable one, I cannot drop it and I'm not going to do anything with it. But I can simply drag the draggable object around the screen. OK. Now, let's proceed with our code. In here I need to implement some events that I'd like to see taking place when I'm working with the draggable. So I'm going to put the opening brace, and then down here I'm going to close it. OK. Now, the same thing for the droppable one. I'm going to open this and close it down here.
Now, for the draggable I need to implement some events. OK. What are my events that I'd like to implement? For example, I can implement start, and then give it some action. But in this case I'm not interested in start, the only two I'm interested in are drag and stop. OK. So in here I'm going to illustrate the drag functionality, and that will be a function that's going to execute with event and UI as parameters. The event is actually the event that took place. The UI is the UI element that was effected by that and here's the body for that method. Since there are more than one, I'm going to put a ',' as you saw on the screen.
Now for the second one is the stop. The stop event is also a function that should take place that takes event and UI as parameters. So this is the drag as a function, it just moves some of this space that's not needed. And same thing for the stop. Now, what do you want to happen when you drag the element? I'm going to change the opacity, and when I stop I'm going to change the opacity back to the way it was. So in this case, then, I'm going to reference my draggable object, I'm going to call 'draggable' on it, right? And then that's because that's how I change the properties. In this case, what am I changing? I'm changing an option named 'opacity'. So opacity option as the first parameter. What property am I changing, what option, am I changing? The opacity. OK. And then what value am I changing it to? In this case: 0.3. OK. Now, as far as the stop one is concerned, I'm going to change that value back to 1.0. So I'm going to call draggable the same way I just called it, and also change the option which is the opacity and make that 1.0. So I'm going to take this, and change the option of opacity and make that 1.0. So that's the draggable. When the drag is happening, and then the stop is happening. OK.
So let's try to preview that in the browser. Nothing's happening. So let's see what the problem is. Not sure what I have changed in here that would make it not work, because it should. For the drag I have the function event which changed the option of opacity to 0.3 and here I have the, I was trying a couple of things, it should be stop event. I believe it should be the stop event. This is based on the documentation for jQuery. So let's go ahead and try to preview that in the browser. I'm just trying a couple of things to see why dragging is not working. Yeah, it's not working. But if I try step, try to preview that, now it's working. I believe the documentation says 'stop' instead of step, but I could be mistaken. So you'll notice right now that the actual opacity of the object is changing to .3 when I'm dragging it, right? So that's the illustration that I want. So in this case then it's a step. Then with that even, it will actually change the opacity to 1.0 and then change it .3 and then back to 1.0. Let's try to view that in the browser again. The first attempt doesn't work, but it works afterward and takes it back to 1.0 when I let go. You see, I drag it and it's .3, let go and 1.0 back again.
At any rate, let's go ahead and implement the droppable functionality. In the case of a droppable I'm going to drop the object right on the second one. So I'm going to take this object over here and drop it on this element and see what happens. So this then would implement the event or the action called 'drop'. So when something gets dropped on that DIV, what do you want to happen? So this is a function, and also takes event and UI as parameters. Now, when this is dropped, what do you want to happen? The one thing that we can do, is basically reference the current element. I'm going to add a class to it, to show some visual effect, and I'm going to find the 'P' element and change its text. Once again, you see that P element that says drop location. I'm going to do a few steps with the dropping. The first step is, I'm going to reference the current object. And the way you do this with Java script is using 'this'. So for this current object I'm going to add a class. That class is actually called 'UI- state-highlight'. OK. So that's the class that I'd like to add for this, let me use double quotes here I don't think it matters anyway. So I'm referencing the current object which is the one on the right. I'm adding the class UI-state-highlight to it, then I can chain my commands. I can find the element P within that DIV. And when I find that P I'm going to change the HTML for it to say 'dropped object'. Let me move that to the next line so you can see it clear. OK.
So again, the series of steps is, get the object 'this' which is the one on the right. Which means, when I say 'this' I mean this one over here. OK. So, get this object, add a class to it named UI-state-highlight, find the P within it. Well there is a P within that drop location, right? It's called 'drop location'. So we get the drop location and then I'm going to change the HTML for it. So let's see if this works. I'm going to drag the object, and drop it here. And you notice that the text has changed to 'dropped object' and also the UI-state-highlight has been implemented on this object. So let's refresh this again. Do I need to make any changes? No, it's OK. Everything is in there. Let's try to preview it. Drag and drop here, nothing happened. See this is the dragging one that's changing the opacity on only the second one. Drop it. Dropped object. The state- highlight class is being implemented. So this is how I can implement the draggable and the droppable for the jQuery UI. In the next video I'm going to talk about selectable and sortable. And again, if you have any questions or concerns regarding those videos please drop us a line on our website. Thank you very much for listening. I'm Ayad Boudiab, and you take care.