moveable
interact.js
| moveable | interact.js | |
|---|---|---|
| 4 | 15 | |
| 9,583 | 12,117 | |
| - | - | |
| 8.6 | 7.7 | |
| about 2 months ago | about 2 months ago | |
| TypeScript | TypeScript | |
| MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
moveable
-
Ask HN: How to build infinite grid in the browser?
Moveable looks like a super full-featured library for this kind of thing https://daybrush.com/moveable/
-
Do I need full Django or just Django Rest to pair with a react frontend?
I’ve been using this library to handle all the dragging/resizing etc https://github.com/daybrush/moveable/tree/master/packages/react-moveable
- [AskJS] Why do my coworkers not see the value in frameworks?
-
Getting dimensions of the clipped section of an image
I've got an image that is 500px by 500px. I'm using react-moveable to allow the user to clip an image. My question is, how do I get the dimensions of the part of the image that is visible? The whole image is still considered rendered, so doing any kind of rect calculation gets the whole image.
interact.js
- Ask HN: How to build infinite grid in the browser?
-
How to create a Drag and Drop quiz like this?
For vanilla js maybe something like https://shopify.github.io/draggable/ or https://interactjs.io/
- Make Drag & Drop + DropZone with interact.js + reactjs
- Does anyone know of any new, maintained Drag-n-Drop solutions for vue3?
-
I am currently making a Windows 11-themed personal website and planning to add easter eggs. What do you guys think?
I used interact js for dragging and dropping. Everything else is CSS HTML and simple JavaScript.
-
What are some tools (js libraries) that can be used to create operating system-like user interfaces?
https://interactjs.io/ - I might use this for the resizeable windows (and drag and drop for file transfering, yes the "os" will have a file manager)
-
Trouble having an interactive movable GIF not overlay the rest of the page
The library I’m using to get this effect is https://interactjs.io/ since they have pretty much what I need. To make the effect work I have to create a fullscreen div with another div inside that’s being connected to the library so I can move it. The problem that occurs now is, that I can’t interact with anything below the fullscreen div. I’ve tried putting custom css (pointer-events: none) on this div, but this affects the GIF-div inside too so I can’t interact with it anymore.
-
I want to learn vue js and create a entity mapping editor app in the end
I used interactjs (https://interactjs.io/) for the drag and drop events, it's a great library.
-
How would you go about a drag and drop system?
I case you just want a working result: https://interactjs.io
- interact.js - JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+)
What are some alternatives?
photoviewer - 🖼️ A JS plugin to view images just like in Windows.
panes - 🎉📱 Create dynamic modals, cards, panes for your applications in few steps. One instance – Thousands solutions. Any framework and free.
react-movable - 🔀 Drag and drop for your React lists and tables. Accessible. Tiny.
react-beautiful-dnd - Beautiful and accessible drag and drop for lists with React
angular-grid-layout - Responsive grid with draggable and resizable items for Angular applications.
react-kanban - Yet another Kanban/Trello board lib for React.
Scrawl-canvas - Responsive, interactive and more accessible HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element easier, and more fun
nested-dnd - Proof of concept for doing a nested drag and drop in React
react-web-editor - The react-web-editor is a WYSIWYG editor library. you can resize and drag your component. It also has simple rich text editor
react-nestable - Drag & drop hierarchical list made as a react component
selecto - Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch.
filedrop-svelte - File dropzone for Svelte.