Drag and drop javascript framework

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

kbjr / DragDrop Public archive

A JavaScript micro-framework for adding drag-and-drop functionality to elements for advanced UI development

License

kbjr/DragDrop

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

readme.textile

A JavaScript micro-framework for adding drag-and-drop functionality to elements for advanced UI development

Author: James Brumond
Version: 0.2.3-beta

Copyright 2011 James Brumond
Dual licensed under MIT and GPL

The change to version 0.2.1-beta is NOT backwards compatible. Make sure to look over the samples below.

• Simple and intuitive interface
• Option to seperate the event target from the dragged element
• Bindable dragstart/drag/dragend events
• Option to define bounding boxes (new in version 0.2.1-beta)
• Very lightweight (only 1.8kb minified and gzipped)

// Make myElement drag-and-drop enabled DragDrop.bind(myElement); // A more complex version var draggable = DragDrop.bind(myElement, < // The anchor; myElement moves when anotherElement is dragged anchor: anotherElement, // The draggable element will now stay bound within it's offsetParent boundingBox: 'offsetParent', // Define a dragstart event dragstart: function(evt) < // . >>); // Change the bounding box to some manual positions draggable.setBoundingBox(< x: < min: 0, max: 600 >, y: < min: 0, max: 400 >>); // Define a new dragend event draggable.bindEvent('dragend', function(evt) < // . >); // This is how you would remove a drag event (if one were defined above) draggable.unbindEvent('drag', theBoundDragEventFunction);

About

A JavaScript micro-framework for adding drag-and-drop functionality to elements for advanced UI development

Источник

DFlex

DFlex is a Javascript library for modern Drag and Drop apps. It’s built with vanilla Javascript and implemented an enhanced transformation mechanism to manipulate DOM elements. It is by far the only Drag and Drop library on the internet that manipulates the DOM instead of reconstructing it and has its own scheduler and reconciler.

Combined With Your Solution

Every node manipulation is calculated and exposed. So you can add your own functionality without the need to start from scratch.

Vanilla JavaScript

It is a JavaScript solution. It is not a solution for a specific framework. A pure JavaScript library. Every fix, feature, or enhancement will affect all framework implementations.

Native API

A movement mechanism understands the browser and your DOM tree. Focused on high performance and easy implementation without re-inventing the wheel.

Minimum Layout Shift

In most existing solutions the more elements you are trying to manipulate the more layout shifts you get. In real-world apps, you need to prevent cumulative layout shifts. This is one of the fundamentals that DFlex deals with. No matter how many elements you are dealing with it’s always going to be smooth manipulation.

DOM Utility Packages

DFlex is a collection of DOM utility packages. The API design allows dealing with extendable node elements without throttling. The other benefit is the ability to decouple the functionality to prevent a bloated bundle in the production and to make it easier to maintain.

Neat Architecture

DFlex has parent/children architecture. So you can manipulate a child or parent.

Источник

Best Javascript Drag and Drop Libraries

Dragging and droppping elements can be very useful and intuitive while creating websites, in one of my previous posts, I have explained how we can implement drag and drop functionality using Javascript and HTML 5, but in this post, I am going to write about few JS based plugins, which makes easier to implement drag and drop functionality in website.

1. draggable.js

draggable.js is a customizable draggable/droppable/sortable/swappable. Draggable is a modular drag & drop library, allowing you to start small and build up with the features you need. At its most basic, Draggable gives you drag & drop functionality, fast DOM reordering, accessible markup, and a bundle of events to grab on to.

2. Dragula

It doesn’t depeend on any other framework and Dragula is drag and drop library very easy to use. It offers browser support includes every sane browser and IE7+. (Granted you polyfill the functional Array methods in ES5). Framework support includes vanilla JavaScript, Angular, and React.

3. Interact.js

JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers.

Interact.js website also provides you various samples, which you can view. It is easy to manage and can be used with Angular.js

4. Draggabilly

Draggabilly is a VanillaJS plugin that allows you to make any element draggable, it supports IE10+ and touch devices.

5. GridList

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

6. Slip

A tiny library for interactive swiping and reordering of elements in lists on touch screens. No dependencies.

7. ng-sortable

AngularJS Library for Drag and Drop, supports Sortable and Draggable. No JQuery/JQuery UI used. Supports Touch devices.

8. gridstack.js

gridstack.js is a JS/Typescript based library designed to help developers create beautiful draggable, resizable, responsive bootstrap-friendly layouts with just a few lines of code.

• pure JS can be used in any UI framework
• draggable, resizable items
• responsive layouts, column based
• save/restore
• drag between multiple grids
• nested grids
• Can connect to angular, knockout, react js easily
• mobile support

9. React DnD

Drag and Drop library for React. React DnD is a set of React utilities to help you build complex drag and drop interfaces while keeping your components decoupled.

It is a perfect fit for apps like Trello and Storify, where dragging transfers data between different parts of the application, and the components change their appearance and the application state in response to the drag and drop events.

10. Magnet JS

MagnetJS is an open source javascript library for creating and interacting with virtual fridge magnets.

The library can be used in local mode (local movement of magnets), or using the fridgeee.com api (anybody can move the magnets in real-time).

It is designed to be modular and include other components in the future

11. Agnostic-draggable

The implementation of the Draggable, Droppable and Sortable widgets from jQuery UI into an agnostic, VanillaJS and ES6+ based library.

Most of the options and features found in the original implementation by jQuery UI’s team are here

Enables dragging functionality on any DOM element. Move the Draggable element by clicking on it and dragging it anywhere within the viewport.

Also, transforms elements into droppables or drop zones. This means that elements controlled by a Draggable can be dropped into a Droppable if accepted by them.

Источник