0

I have this code which makes element draggable from any point on the boundary of that element, I want it to be specific from corners. Is it possible? I have already tried all code available for Interact JS, and gone through its documentation, but nothing seems to be helpful.

winscripter
  • 109
  • 1
  • 11
shipra
  • 1
  • 1

1 Answers1

0

Follows the numbering [1] to [5] in the codes below (Read the CSS first, then HTML, then JavaScript) for how to make it works.

The edges property of .resizable selector supports passing in a element selector. You can create transparent <div> at the 4 corners of your div and limit your resize to those 4 corners. Docs: https://interactjs.io/docs/resizable/

interact('#box').resizable({
  // [5] Make use of the CSS selector here to only allow from corner
  edges: {
    top: '.edge-top',
    left: '.edge-left',
    bottom: '.edge-bottom',
    right: '.edge-right',
  },
  // Example from documentation: https://interactjs.io/docs/resizable/
  listeners: {
    move: function (event) {
      let { x, y } = event.target.dataset;

      x = (parseFloat(x) || 0) + event.deltaRect.left;
      y = (parseFloat(y) || 0) + event.deltaRect.top;

      Object.assign(event.target.style, {
        width: `${event.rect.width}px`,
        height: `${event.rect.height}px`,
        transform: `translate(${x}px, ${y}px)`,
      });
      Object.assign(event.target.dataset, { x, y });
    },
  },
});
/* [1] First, make your box position: relative so you can have absolute positioned items relative to it */
#box { position: relative }

/* [2] Then, create invisible "corner" for all 4 corners */
.corner { position: absolute; width: 5px; height: 5px; opacity: 0 }

/* [3] Define CSS for all edges to be used by our corner later */
.edge-top { top: 0 }
.edge-bottom { bottom: 0 }
.edge-left { left: 0 }
.edge-right { right: 0 }

/* (Optional) Just for styling / required by docs */
#box { width: 100px; height: 100px; border: 1px solid black; touch-action: none; box-sizing: border-box }
<!DOCTYPE html>
<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<!-- [4] Add the transparent div in all 4 corners to be used by Interact JS later to act as an anchor / point for resize -->
<div id="box">
  <div class="corner edge-top edge-left"></div>
  <div class="corner edge-top edge-right"></div>
  <div class="corner edge-bottom edge-right"></div>
  <div class="corner edge-bottom edge-left"></div>
</div>
AngYC
  • 3,051
  • 6
  • 20