vue-grid-layout - A draggable and resizable grid layout, for Vue.js.

•    Vue

---

This is the initial layout of the grid. The value must be an Array of Object items. Each item must have i, x, y, w and h proprties. Please refer to GridItem documentation below for more informations.

drag-and-drop vue vuejs2 grid grid-layout widget resize vuejs drag draggable resizable fluid responsive

react-absolute-grid - An absolutely positioned, animated, filterable, sortable, drag and droppable, ES6 grid for React

•    Javascript

---

An absolute layout grid with animations, filtering, zooming, and drag and drop support. Use your own component as the grid item. See the Demo. The idea behind AbsoluteGrid is high performance. This is achieved by using Translate3d to position each item in the layout. Items are never removed from the DOM, instead they are hidden. For best performance you should avoid re-arranging or removing items which you pass into AbsoluteGrid, instead you can use the filtered and sort properties to hide or sort an item. Those properties are customizable using the keyProp and filterProp properties. In addition, all data passed must be immutable so that we don't waste any renders.

react reactjs reactjs-components react-component react-components

grid - Drag and drop library for two-dimensional, resizable and responsive lists

•    Javascript

---

The first constructor parameter is an array of items to populate the grid with. Build the grid structure from scratch, using the positions of the given items. If items lack positional attributes (x and y), they will be misplaced, possibly overlapping. If you want to build a grid around a list of items that only have their size attributes defined (w and h), and rely on the library to position them two-dimensionally, use resizeGrid.

grid drag-and-drop resizable reponsive

react-rnd - 🖱 A resizable and draggable component for React.

•    TypeScript

---

A resizable and draggable component for React. The width and height property is used to set the default size of the component. For example, you can set 300, '300px', 50%. If omitted, set 'auto'.

react drag resize resizable component draggable

react-smooth-dnd - react wrapper components for smooth-dnd

•    Javascript

---

A fast and lightweight drag&drop, sortable library for React with many configuration options covering many d&d scenarios. It uses css transitions for animations so it's hardware accelerated whenever possible. This library consists wrapper React components over smooth-dnd library.

react drag-and-drop draggable dragndrop sortable reactjs drag drop drag-drop drag&drop dnd

react-dnd - Drag and Drop for React

•    TypeScript

---

Drag and Drop for React. Big thanks to BrowserStack for letting the maintainers use their service to debug browser issues.

react drag-and-drop reactjs file drag drop html5 draggable droppable dnd react-component hoc

interact

•    Javascript

---

JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+). Visit http://interactjs.io/docs for the API documentation.

drag-and-drop inertia snap vanilla multi-touch interact.js draggable droppable drag drop resize touch gesture grid autoscroll svg

angular2-grid - A drag/drop/resize grid-based plugin directive for angular2

•    TypeScript

---

A grid-based drag/drop/resize directive plugin for Angular 2

grid angular angular2-grid angular2 web-components angular-component

Sortable - Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices

•    Javascript

---

Sortable is a minimalist JavaScript library for reorderable drag-and-drop lists. You can use any element for the list and its elements, not just ul/li. Here is an example with divs.

drag sortable reordering sort drag-and-drop drag-drop ui draggable droppable reorder meteor angular ng-sortable react mixin

grid-styled - Responsive React grid system built with styled-system

•    Javascript

---

The Box component handles width, margin and padding. All grid-styled components use styled-system for style props, which pick up values from a theme and allow for responsive styles to be passed as array values.

react grid styled-components flexbox css styled-system margin padding css-in-js layout responsive emotion

autoresponsive-react - Auto Responsive Layout Library For React

•    Javascript

---

Auto responsive grid layout library for React.See our CONTRIBUTING.md for information on how to contribute.

react layout react-components data-grid table data-table

react-native-super-grid - Responsive Grid View for React Native

•    Javascript

---

Responsive Grid View for React Native. This component renders a Grid View that adapts itself to various screen resolutions.

react-native gridview grid listview responsive flatlist responsive-grid react native super view

draggable - The JavaScript Drag & Drop library your grandparents warned you about.

•    Javascript

---

Get complete control over drag and drop behaviour with Draggable! Draggable abstracts native browser events into a comprehensive API to create a custom drag and drop experience. Draggable comes with additional modules: Sortable, Droppable, Swappable. Draggable itself does not perform any sorting behaviour while dragging, but does the heavy lifting, e.g. creates mirror, emits events, manages sensor events, makes elements draggable.The additional modules are built on top of Draggable and therefore provide a similar API interface, for more information read the documentation below.

drag-and-drop draggable es6 shopify

Simple-Grid - A basic responsive grid for winners

•    HTML

---

Simple Grid is a basic lightweight grid, not a CSS framework. There are no styles for buttons, tables, typography etc. etc. Simple Grid comes with two different types of grids. There is a grid for content, which looks like <div class="col-1-3"></div> and a grid for layouts, which looks like <div class="col-4-12"></div>. Simple Grid is also built for responsive layouts. With fluid columns, the grid will resize to adjust to the browser resolution. To accommodate for mobile and tablet devices, the grid will essentially stack all columns, one above another, when viewed on smaller screens. To see the grid in action jump on over to the Simple Grid example page.

vue-slicksort - A set of vue mixins to turn any list into an animated, touch-friendly, sortable list ✌️

•    Javascript

---

That's it! Vue Slicksort does not come with any styles by default, since it's meant to enhance your existing components.

drag grid drop vue-slicksort mixin-components sortable-helper sort animated dependency free vue vuejs vue-component vue-mixin sortable sortable-list list smooth mixin component react-sortable-hoc vue-sort vue-sortable drag-and-drop

react-native-sortable-listview - Drag drop capable wrapper of ListView for React Native

•    Javascript

---

Drag drop capable wrapper of ListView for React Native. Allows for dragging and dropping of rows with automatic scrolling while dragging. See example.

react-component ios android react-native drag drop touch listview list sort

react-stack-grid - Pinterest like layout components for React.js

•    Javascript

---

Pinterest like layout components for React.js. You can install the react-stack-grid from npm.

react pinterest animation react-component grid-layout layout grid masonry

react-beautiful-dnd - Beautiful, accessible drag and drop for lists with React.js

•    Javascript

---

Beautiful, accessible drag and drop for lists with React.js

react drag-and-drop drag dnd react.js natural beautiful

make - Your friendly small business site builder.

•    PHP

---

Build a website that means business. With Make’s powerful drag and drop page builder and hundreds of Customizer options, you can effortlessly brand your site without touching a line of code. Add full-width banners, columns, and galleries to showcase your best work. The intuitive builder delivers clean, lean code — not shortcodes — so you can trust your content remains portable. Make lets you control page layout options, including sidebar display, on all your posts and pages. Choose from hundreds of Google Fonts and upload custom backgrounds everywhere. Built on a fully responsive grid, Make renders as beautifully on tablets and phone screens as it does on desktop. Make scales with your business and is fully compatible with popular plugins like WooCommerce, Gravity Forms, Contact Form 7, Jetpack, and others. For documentation on the page builder and getting started with Make, see: https://thethemefoundry.com/make-help/

dazzle - :rocket: Dashboards made easy in React JS.

•    Javascript

---

Dazzle is a library for building dashboards with React JS. Dazzle does not depend on any front-end libraries but it makes it easier to integrate with them.Dazzle's goal is to be flexible and simple. Even though there are some UI components readily available out of the box, you have the complete control to override them as you wish with your own styles and layout.

dashboard react-js visualization analytics dashboard-widget drag-and-drop react react-component widgets react-dazzle analytics-dashboard