Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to make a polygon object react to the drag and drop event using FabricJS?
We can create a Polygon object by creating an instance of fabric.Polygon. A polygon object can be characterized by any closed shape consisting of a set of connected straight line segments. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity etc. We use the event:dragover and event:drop events to make a polygon object react to the drag and drop event.
Syntax
object.on('drop', function(event) {
// Handle drop event
});
object.on('dragover', function(event) {
// Handle dragover event
});
Example 1: Polygon Object Reacting to Drop Event
Let's see a code example to find the logged output when we drop an HTML element on top of a polygon object added to the canvas. We have created an "h1" element with draggable properties and use event listeners to handle the drop interaction.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Displaying how the object reacts to drop event</h2>
<p>
You can drop the box on the polygon object and open the console from the dev tools to see the event details
</p>
<canvas id="canvas"></canvas>
<h1
draggable="true"
id="drop-me"
style="
color: white;
background-color: rgb(166, 103, 248);
width: 130px;
height: 70px;
padding: 10px;
cursor: grab;">
Drop me
</h1>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a polygon instance
var polygon = new fabric.Polygon(
[
{ x: 0, y: 0 },
{ x: 0, y: 150 },
{ x: 150, y: 150 },
{ x: 150, y: 0 },
],
{
left: 100,
top: 60,
fill: "red",
stroke: "blue",
strokeWidth: 2,
objectCaching: false,
}
);
// Adding it to the canvas
canvas.add(polygon);
// Add drop event listener to polygon
polygon.on('drop', function(event) {
console.log("Drop event fired on polygon:", event);
console.log("Event type:", event.e.type);
console.log("Target object:", event.target);
});
// Enable drag and drop on canvas
canvas.on('drop', function(event) {
event.e.preventDefault();
console.log("Canvas drop event:", event);
});
canvas.on('dragover', function(event) {
event.e.preventDefault();
});
</script>
</body>
</html>
Example 2: Polygon Object Reacting to Dragover Event
This example demonstrates how a polygon object reacts when we drag an HTML element over it. The dragover event occurs when we are dragging an object over another object. Here, when we drag the "h1" element over the polygon object, the event details are logged in the console.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Displaying how the object reacts to dragover event</h2>
<p>
You can drag the box over the polygon object and open the console from the dev tools to see the event details
</p>
<canvas id="canvas"></canvas>
<h1
draggable="true"
id="drag-me"
style="
color: white;
background-color: purple;
width: 130px;
height: 70px;
padding: 10px;
cursor: grab;">
Drag me
</h1>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a polygon instance
var polygon = new fabric.Polygon(
[
{ x: 0, y: 0 },
{ x: 0, y: 150 },
{ x: 150, y: 150 },
{ x: 150, y: 0 },
],
{
left: 100,
top: 60,
fill: "red",
stroke: "blue",
strokeWidth: 2,
}
);
// Adding it to the canvas
canvas.add(polygon);
// Add dragover event listener to polygon
polygon.on('dragover', function(event) {
console.log("Dragover event fired on polygon:", event);
console.log("Event type:", event.e.type);
console.log("Mouse position:", event.e.clientX, event.e.clientY);
});
// Enable drag and drop on canvas
canvas.on('dragover', function(event) {
event.e.preventDefault();
console.log("Canvas dragover event at:", event.e.offsetX, event.e.offsetY);
});
canvas.on('drop', function(event) {
event.e.preventDefault();
});
</script>
</body>
</html>
Key Points
-
Event Prevention: Use
event.e.preventDefault()to allow drop operations - Event Object: The event parameter contains details about the drag/drop interaction
- Canvas Events: Both polygon objects and the canvas itself can listen for drag and drop events
-
Draggable Elements: HTML elements need the
draggable="true"attribute to be draggable
Conclusion
In this tutorial, we demonstrated how to make polygon objects in FabricJS react to drag and drop events. By using event listeners for 'drop' and 'dragover' events, you can create interactive polygon objects that respond to user drag and drop actions.
880 Views
