Resizing cannot assign elements for corner edges, only top, left, right and bottom edges available

taye / interact.js

JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+)

http://interactjs.io/

MIT License

12.32k stars 783 forks source link

Resizing cannot assign elements for corner edges, only top, left, right and bottom edges available #977

Closed ZaDarkSide closed 1 year ago

ZaDarkSide commented 2 years ago

Expected behavior

You should be able to assign CSS selectors for corner edges.

Actual behavior

Cannot assign CSS selectors for corner edges.


    interact(el).resizable({
        edges: { top: '.top', left: '.left', right: '.right', bottom: '.bottom' }, // <= here you cannot set corners (diagonals) for resizing
    })

System configuration

interact.js version: 1.10.17 Browser name and version: Edge 103, Chrome 103 Operating System: Windows 10

taye commented 1 year ago

If an element matches selectors for two edges that meet at a corner, then it will resize both edges.

<div class="top right">↗</div>