Start by creating an empty HTML file
We will start off by create a blank HTML page and an empty PixiJS application. Inside the new file, add this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PixiJS Drag and drops</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.4/pixi.min.js"></script>
</head>
<body>
<script type="text/javascript">
// The application
var app = new PIXI.Application();
// Add application to the DOM
document.body.appendChild(app.view);
</script>
</body>
</html>If you open up the HTML file in your browser, you should see a big black square. That means that the PixiJS application is working.
We are just using a CDN to import PixiJS, so we don't have to install anything. This is really easy to do, and it's more than enough for what we're doing in this tutorial.
Inside the <script> tag, we're creating a new Pixi application and adding it to the body.
Adding an object to interact with
In order to move an object, we need to see an object. Since the most important part of this tutorial is the drag and drop, we can make it really easy by just adding a green square. Below the line were the application is added to the body, add this code:
var square = new PIXI.Graphics();
square.beginFill(0x00ff00);
square.drawRect(0, 0, 50, 50);
square.endFill();
square.x = 100;
square.y = 100;
square.interactive = true;
square.dragging = false;
app.stage.addChild(square);In the first line, we define a new variable called square. This is a reference to the Graphics API from PixiJS. On the next line, we set the fill color to 0x00ff00 (green). We then set the position and make the object interactive. And last but not least, we're appending it to the stage.
If you don't set the object to be interactive, you won't be able to listen to events.
We also want to set a variable called dragging to false. We do this so that we know when the user has clicked the square.
If you open up the file you created in a browser, a small green square will appear. Nothing will happen when you click it, but we'll fix that now :-)
mousedown event (pick up)
Below this line (square.interactive = true;) add this code:
square.on('mousedown', function (e) {
console.log('Picked up');
square.x = e.data.global.x;
square.y = e.data.global.y;
square.dragging = true;
});If you open the HTML file in your browser now and click the green square, you'll see some output in the console. This is the X position and the Y position of the mouse cursor.
mousemove event (drag)
The code above registered where you clicked the mouse. But what if you want to know where you drag the mouse while holding down the button?
square.on('mousemove', function (e) {
console.log('Dragging');
if (square.dragging) {
square.x = e.data.global.x;
square.y = e.data.global.y;
}
});If you click the green square and move the cursor around, you'll see that the output in the console will change. We added a check to see if the user has clicked (dragging === true). If we didn't have this, the square would follow the mouse at all times.
mouseup event (drop)
The last event we're going to talk about is mouseup. This is triggered when you release the mouse button.
square.on('mouseup', function (e) {
console.log('Moving');
square.x = e.data.global.x;
square.y = e.data.global.y;
square.dragging = false;
});We want to "reset" the square.dragging variable when the object is released.
Summary
In this article you learned the basics of dragging and dropping in Pixi.JS.