svelte-drag

  •        359

A lightweight Svelte Action to make your elements draggable. Inspired from the amazing react-draggable library, and implements the same API.

https://github.com/PuruVJ/svelte-drag#readme

Dependencies:

fast-memoize : ^2.5.2

Tags
Implementation
License
Platform

   




Related Projects

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.

dragmove

  •    Javascript

A super tiny Javascript library to make DOM elements draggable and movable. Has touch screen support. Zero dependencies and 500 bytes Gzipped. Demo here. Check this example to include dragmove.js as a <script> directly on an HTML page.

react-grid-layout - A draggable and resizable grid layout with responsive breakpoints, for React.

  •    Javascript

React-Grid-Layout is a grid layout system much like Packery or Gridster, for React. Unlike those systems, it is responsive and supports breakpoints. Breakpoint layouts can be provided by the user or autogenerated.

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-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-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.

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.

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.

storeon - 🌩 A tiny (173 bytes) event-based Redux-like state manager for React, Preact, Angular, and Svelte

  •    Javascript

A tiny event-based Redux-like state manager for React, Preact, Angular, and Svelte. Read more about Storeon features in our article.

Mitosis - Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and more

  •    Typescript

Mitosis is inspired by many modern frameworks. You'll see components look like React components and use React-like hooks, but have simple mutable state like Vue, use a static form of JSX like Solid, compile away like Svelte, and uses a simple, prescriptive structure like Angular. Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and more.

react-draggable - React draggable component

  •    Javascript

A simple component for making elements draggable.If you aren't using browserify/webpack, a UMD version of react-draggable is available. It is updated per-release only. This bundle is also what is loaded when installing from npm. It expects external React and ReactDOM.

svelte-calendar - A lightweight datepicker with neat animations and a unique UX.

  •    Svelte

A small date picker built with Svelte 3. Demo available here: demo page. These properties set the minimum and maximum dates that will be rendered by this calendar. It is recommended that you do not leave these as their defaults and supply values which suit your application's needs.

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.

knockout-sortable - A Knockout

  •    Javascript

knockout-sortable is a binding for Knockout.js designed to connect observableArrays with jQuery UI's sortable functionality. This allows a user to drag and drop items within a list or between lists and have the corresponding observableArrays updated appropriately. Note: The sortable binding assumes that the child "templates" have a single container element. You cannot use containerless bindings (comment-based) bindings at the top-level of your template, as the jQuery draggable/sortable functionality needs an element to operate on.

notus-svelte - Notus Svelte: Free Tailwind CSS UI Kit and Admin

  •    Svelte

Start your development with a Free Tailwind CSS and Svelte UI Kit and Admin. Let Notus Svelte amaze you with its cool features and build tools and get your project to a whole new level. Notus Svelte is Free and Open Source. It features multiple HTML and Svelte elements and it comes with dynamic components for Svelte.

tinro - Highly declarative, tiny, dependency free router for Svelte's web applications.

  •    Javascript

tinro is a highly declarative, tiny), dependency free router for Svelte web applications. Shows its content only when path matches the URL of the page exactly. You can't place a nested <Route> inside these components.

TableDnD - jQuery plug-in to drag and drop rows in HTML tables

  •    HTML

You'll also need to include jQuery before you include this plugin (so that jQuery is defined). Basically we get the table element and call tableDnD. If you try this, you'll see that the rows are now draggable.

SVELTE - Cybernetically enhanced web apps

  •    Typescript

Svelte is a new way to build web applications. It is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app. Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.