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 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.

Updated on: 02-Jan-2023

516 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements