Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Make Polygon Object React to Drag and Drop Event Using Fabric.js
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 event to make a polygon object react to the drag and drop event.
Syntax
event:dragover event:drop
Example 1: Displaying how the Object Reacts to drop Event
Let's see a code example to find the logged output when we drop a "h1" element on top of a polygon object added to the canvas. We have created a "h1" element and given it an id = "drop-me". Further we use the getElementById() method which returns the "h1" element and use the addEventListener() method to listen for the drop event. Therefore, when we grab the "h1" element and drop it over the polygon object, the properties concerning the event are displayed.
<!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 object and open the console from the dev tools to see that the event name, subTargets and target are being shown
</p>
<canvas id="canvas"></canvas>
<h1
draggable="true"
id="drop-me"
style="
color: black;
background-color: rgb(166, 103, 248);
width: 130px;
height: 70 px;
padding: 10px;">
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);
// Initiating the observe function
function observe(eventName) {
canvas.getObjects().forEach(function (object) {
object.on(eventName, function evt(x) {
console.log("Drop event has been fired", x);
});
});
}
// Using addEventListener and listening for drop event
document
.getElementById("drop-me")
.addEventListener("change", observe("drop"));
</script>
</body>
</html>
Example 2: Displaying how the Object Reacts to dragover Event
Let's see a code example to find the logged output when we drag a "h1" element over a polygon object added to the canvas. A drag event occurs when we drag an object while moving it to a different location. However, a dragover event occurs when we are dragging an object over another object. Here, when we drag the "h1" element over a polygon object, the event name, target and subTargets 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 on the object and open the console from the dev tools to see that the event name, target and subTargets are being shown
</p>
<canvas id="canvas"></canvas>
<h1
draggable="true"
id="drag-me"
style="
color: black;
background-color: purple;
width: 130px;
height: 70 px;
padding: 10px;" >
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);
// Initiating the observe function
function observe(eventName) {
canvas.getObjects().forEach(function (object) {
object.on(eventName, function evt(x) {
console.log("Dragover event has been fired", x);
});
});
}
// Using addEventListener and listening for dragover event
document
.getElementById("drag-me")
.addEventListener("change", observe("dragover"));
</script>
</body>
</html>
Conclusion
In this tutorial, we used two simple examples to demonstrate how you can make a polygon object react to the drag and drop event using FabricJS.
731 Views
