HTML5 Upload Image, Ratio with Drag and Drop is a tool to help you upload images, making full use of HTML5 with canvas. The drag and drop feature makes this an ideal, and easy, solution for use in a content management system.

Key features include:

• Use canvas to crop images (no server scripts needed)
• Full HTML5 support
• Touch support so everything works great on tablet and mobile devices
• Responsive design
• Save images with AJAX or use the traditional FORM input file element
• Uses ratios to fit screens or elements
• Easy to use
• Additional options to configure
• Works with Bootstrap 3.1
• Works with jQuery 1.9

HTML5 Upload Image is a premium tool and is available from the Envato Market for $11, which includes quality checks, future updates and 6 months of support.

Drag and Drop is a full website and content management system back end with an included database. This plugin works with that system to create three options for using and displaying sortable lists with jQuery, CSS, mySQL, AJAX and PHP.

The first example populates the list from the database, allows you to sort the order, then allows you to save he list using ajax functionality so the page does not reload. In addition, there is a message box that shows the status of whether the boxes have been moved and not saved and whether changes have been implemented to the database.

The second example is a simple sort list that allows you to produce a list of varying length and apply a drag and drop feature.

The third example shows how the functionality can work across a multiple column format.

This tool works across a variety of platforms and includes support for touch devices and lets you save lists via a cookie session. Drag and Drop Sortable Lists is available from the Envato Market for $5. The license includes future updates and has been quality checked by Envato. Additional support is also available.

Sortable is a minimalist Javascript library that helps you create reorderable, drag and drop lists for modern web browsers and touch devices. And it does not use jQuery!

The tool comes with plenty of other nifty features as well, such as

• CSS animation when moving items
• Support for drag handles and selectable text
• Smart auto-scrolling
• Support for meteor, AngularJS, React and Polymer
• Supports any CSS library (such as Bootstrap)
• Has a simple API
• Allows dragging within a list or between lists

Sortable is packed with customization options as well including sorting, delay, filtering, ghost classes, fallbacks, and scrolling sensitivity and speed.

Sortable comes with plenty of documentation to help you get started and if you want to go the jQuery route, there’s support and documentation for that as well.

Dropify is a tool that helps you create stylish input field. This is a great little tool if you are sick of plain inputs and want to showcase some of your design finesse.

The plugin comes with a drag and drop default file style or you can add your own text or images for a truly custom look. You can also set the height of the input box, combine options, disable the input altogether, add a maximum file size or use events.

And it all works with a little jQuery magic. Just clone in the project in your workspace, download the package, compile the assets and you are ready to roll with Dropify. (It is important to note that you have to include the js, CSS and fonts files for everything to work smoothly.)

With the available options, Dropify has plenty of documentation to help you set everything up and get moving quickly. The options are intuitive and easy to set.

Have you ever wanted a drag and drop library that just works? One that doesn’t depend on bloated frameworks, and that has great support? Then Dragula is precisely what you have been looking for.

This little plugin makes drag and drop easier than you can imagine. Key features include:

• Super easy to set up
• No bloated dependencies
• Figures out sort order on its own
• A shadow where the item would be dropped offers visual feedback
• Touch events!
• Seamlessly handles clicks without any configuration

Install using NPM or Bower, include the CSS files and you are ready to go. (And there’s plenty of documentation if you need help along the way.)

Here’s how it works: By default, Dragula will allow the user to drag an element in any of the containers and drop it in any other container in the list. If the element is dropped anywhere that’s not one of the containers, the event will be gracefully cancelled according to the revertOnSpill and removeOnSpill options. (Note that dragging is only triggered on left clicks, and only if no meta keys are pressed.)

There are plenty of options and customizations so you can dictate exactly how this plugin will work on your website.

A flexible, opinionated sorting plugin for jQuery

Create an infinite wall interface.

An open source dynamic grid system with drag an drop.

Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. It is on par with sliced bread, or possibly better. MIT licensed. Suitable for children of all ages. Made by Ducksboard.

Extends the current functionality to allow for elements to be grouped and dragged as a group.