 In this video, we're going to talk about object positioning, specifically using the X, Y axis. And we're going to demonstrate how to drag an object and how to get real-time feedback on that object's position. Alright, let's dive in here. First thing we need to do is make a rectangle. So let's say rectangle. We'll call this My Shape. And we're going to add a text in a mouse area. It's not truly a label, but we're going to call it Label. Why not? And then mouse area. And we want to actually drop an anchor for this text. I'm going to center this in the parent. And then we want to set some basic properties here. So let's say with 100, height 100. And let's go ahead and set the color. There we go. Save and run. And in all of its beauty, there is our rectangle right over in the corner there. So let's do some positioning. First thing we're going to do is we want to make a JavaScript function because we want to be able to track when this position changes. And we're going to do that using the object lifecycle. We haven't really talked about it because it's a bit more complex than what this series is going to cover. But you need to be aware that it does exist. So we're going to say function update console.log. And because this function lives in the rectangle, we have access to all of the rectangles properties. So we can say x, which is the x position of the rectangle. And that probably looks a little bit weird, but it's the x position, a string, and the y position. We could do z as well if we felt like it, but it's not going to change for this video. Then we're going to say label, text, and we want to actually set that text. And we're going to do a little bit of JavaScript. We're going to say math, round, I promise we will cover JavaScript in future videos. But for now, if you don't know JavaScript, just kind of take it on leap of faith. What we're doing is not super complex anyway. So pretty self-explanatory, but just to run it through, we're calling the math library and we're calling the round function otherwise. X and Y are going to be these long floating point numbers. It'll be like 34 point, something like that. And we don't want that. We don't want just like 34 or 45 or whatever it's going to be. So we're just going to change the text to X and then a string and then Y. So how do we call this JavaScript function? Well, first thing, let's actually set the position. So we're going to say X and Y. And if we felt adventurous, we could say anchors, center in, parents. Now, which one of these is going to win out? This is where it gets a little complex. That's how the anchor is going to win. It's not at 100, 100. Let's flip that around. So we're setting the anchor first, then setting 100 by 100. Notice how the anchor always wins. Something to bear in mind throughout this video. The anchor will always win. Say it with me. All right. Now we're going to say component. And this is part of the object lifecycle. And we want uncompleted. And then we're going to call our JavaScript function. This is part of all of the components that ever exist in QML. It's part of their lifecycle. When it's uncompleted, it emits a signal. And we are now consuming that and calling our function. Notice how it says negative 50 by negative 50. Huh? What are we talking about here? Part of that's because of the anchoring system. Let's get rid of that anchor and see what it says. Now it works 100 by 100. So where did that negative 50 come from? Well, basically under the hood, what's going on is when you set an anchor, QML ignores any manual positioning. So your numbers are not going to be reliable. We want to now take this and be able to drag it around and get instant feedback on that. So let's go in here. Drag and drop is a complex topic. So we're just going to focus on the drag target. And the drag target basically says, hey, when the mouse is dragging, what are we doing? What are we moving? What are we manipulating? So the drag target is going to be the parent or the rectangle. You could set it to anything you want. You could set it to the text. You could even set it to the mouse area, although that probably wouldn't end well. Point being, you can do just about anything you want here. Let's go ahead and reset that anchor. And I want to say on exchange, we're going to also update. And on Y changed also update. Let's see if we get different results here. Notice how now suddenly we have actual numbers, even though we have an anchor set. So what's happening here is component on complete is firing, but then it's setting the X and Y positions and calling the on X changed on Y change. And we're getting the true numbers. If we try to drag, we cannot. Nothing's happening. See, output is flashing down here. So we've got a bunch of output, but nothing's happening. We can even just clear this out, bring it back up just to see that, hey, yep, we are trying, but it's not moving. You've probably guessed it's due to this anchor. So let's kill that anchor and I'm going to actually group those together. Now when we run this, ta-da! Notice how we get the numbers in real time, but if we stop it and restart it, it just says text because we commented out that component on complete. That's why I really wanted to bring that to your attention because a lot of times you're going to say, hey, I need to set something as soon as this component is loaded. In that case, it would be component on completed. And let's just regroup this back down with its buddies. Preferably in the order they're going to fire off in, it doesn't really matter though. And let's run this. Now we have 100 by 100 and we can move them around just freely. What's up, everybody? This is Brian. I hope you enjoyed this video. It's part of a larger series out on udemy.com called QML for Beginners. The QML for Beginners course assumes you know absolutely zero QML. You're just starting off and it's designed specifically for Q5. I will re-record the entire series when Q6 comes out and just know that it's over 100 videos and 13 and a half hours of video on demand. I'll put a link below so you can get a highly discounted rate. And before you dive in, just understand it covers a lot more than what I can put into this list. Everything from what's QML to animations to C++, integration, JavaScript, and on and on and on. But one of the requirements up front is you have to know Qt Core. You should have some C++ under your belt and be very familiar with Qt 5. In case you have none of that, I do have some courses for Qt Core Beginners intermediate and advanced out on udemy as well. Hope to see you there.