Introduction to Draggable Interaction in jQuery

Crypters Infotech
A free video tutorial from Crypters Infotech
Career Enhancement Training Solutions
4.1 instructor rating • 12 courses • 12,831 students

Lecture description

Learn how easy it is to make an element draggable.

Learn more from the full course

jQuery UI in Action: Build 12 jQuery UI Projects

jQuery UI (User Interface) Hands-On Course!! jQuery UI Examples, Quizzes & jQuery UI Projects. jQuery UI from Scratch

22:28:16 of on-demand video • Updated March 2021

  • Learn jQuery UI from scratch
  • Understand jQuery UI interactions and widgets in detail
  • Enhance jQuery and jQuery UI knowledge
  • Develop 11 real-world jQuery UI projects from scratch
  • Become a jQuery UI expert
English [Auto] Now let's see how to make an element drag art movie drag comes under the category interactions because this makes it the site or web application more interactive. So it is very simply to make an element drive the B in J query uate so to illustrate this I have created a web page and named it Dragon big dark achievement. And I have added references to that. Jade Goody goody unifiers. As I have already mentioned make sure that you add the offense to the GA queried our js file before J query. JS file. I have also changed the title of the page to interaction drag a bit. OK now we are leaving the page. Next what we need to do we need to have some element to make it drag a bit. So let me add a paragraph B. This is my message. OK now to make this draggle be right. We need to do this. We need to select this element and use dot drag. So let me add this clip section. Script. First we need to check whether our document is ready or not. So this is just basic git query. If you are new to J. You might not know this so I am explaining it. We need to write our code within Darla document doctora event so we will write it like this. Download document Dockerty then inside Grady we need to write function then open and close parenthesis and open and close curly braces and we need to write our code here that is within this document create the event. So the need to select the element to make it move or drag a bit right. So how we can select this element in Jade Goody. There are a number of selectors we are going to use the back selector or the element name. So Darla in de-brief course we need to specify the name of the element. Just be right then we just need to write d'arte drag be open and close parenthesis. OK so with just one line of code we have made an element drag. Let's see how it works. Refresh your seeing this paragraph right that me click here. See this paragraph this movie whatever you want. OK so we have made this paragraph move be in query. By writing this line of code. Suppose we have a development deal. Let me add an ID for this view and make it the box that this looked like a box do and let me add some state that is CS's. OK let me specify hash blocks because I want to style the box that me said the vague let it be see hundred X then height. Let it also be 100 be X then let me set some background color. Let the b c being OK. Let me also set the bar that that be run it's solid black. This is siestas. I'm going to take the box to lay this chick hold up yes now refresh. See you're seeing a box like this. OK. Let me also add a marginal to be X so that there'll be a gap between the bar and the box. OK. Now this looking like this. And I'm also going to add one more paragraph after this. The this and the message as if no what we have written we have made the B element drag. So refresh began move the speed element and even this element. Now why do they need this. I want only the first B element and R. So this box drag. I don't want this element to be dragged about it. So are they going to again just specify the first. This was like the first paragraph. These are our basic Jade Goody selectors. If you are new do you agree we already have a query goes. You can find that course if you are finding it difficult to follow because we would be using Jade Goody in-between as Jade Goody. It is believed on the top of Jade Goody. I will also be explaining it in detail. So this the first you say selected. There's a basic J.A.G. selected this we select the first element and we also need to make the box more. So what they can do is I can put the comma and select the box using its ID so hash box this will select the do as well. So let us check refresh. See this is more b c this is not by now because we have not selected this paragraph then. This development is also moving so we can make whatever element we want to be more or drag. OK next let me make some changes so that it would be more useful to use a drag element. This drag interaction is most commonly used with drop interaction which we will discuss later but to show it's usability. Let me make some changes to this b element. So I want some filler text to let me copy this to this and I'm making this better growth rate based in it. So what we have now. Refresh. See here is a long paragraph. Then the box then the text message. So what I'm going to do is I'm going to make this some important message. OK and I'm going to style this b element a bit so let me add a night before this. Id am IGMP. That is important. And within the style section that me selected and set its position to be said OK and left to be Cyril and top onto Duby zero. No it will happen. It will appear on the left corner. So let me save this refresh. See Is that paragraph now. Visibly no. So what I'm going to do is I'm going to make that paragraph Mubi art Dragomir that this I want. That's my paragraph to be dragged a bit or need that small paragraph to be dry. So refresh Now this message is not here isn't it. So what I'm going to do is I'm going to drag it to some other place so that I can read this message clearly. So by making this paragraph drag the body like we can do this we can move it to whatever we want and hence read it clearly. So in this section we have seen how to make different elements drag debate or move or be seeing jake with the UI. It is as simple as adding this one line of code. Right you can select whichever element you want and make it drag. By writing this one line of code in the following lectures we are going to see a number of options Smet and events that you can use to modify the nature of this drag a B element we see in the following lectures.