Can we make element resizable only from corners, and not from anywhere in Interact JS?

Question

Can we make element resizable only from corners, and not from anywhere in Interact JS?

259 views Asked by shipra At 28 April 2023 at 18:06

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.

Original Q&A

There are 1 answers

**AngYC** · Answer 1 · 2023-04-30T02:51:33+00:00

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>

TechQA.

Can we make element resizable only from corners, and not from anywhere in Interact JS?

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in F#-INTERACTIVE

Related Questions in INTERACTJS

Popular Questions

Popular Tags

Trending Questions