• Paid

Drag and Drop Sortable Lists

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.

  • Vanilla

Sortable: JavaScript Library for Reorderable Drag-and-drop Lists

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: Override Input Files with Style

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.

  • Vanilla

Quick[select]: Selection of Common Options in Select Boxes

Quick[select] is a jQuery plugin for quick selection of common options in select boxes.

Select boxes are a two tap or click operation. They take the user out of the flow of the form, and there are certain answers that are more commonly chosen than others, such as a reply of “yes” or “no.” Or maybe you would prefer people to give a definite yes/no answer. This plugin provides the ability to bring those options outside of the select list.

Quick[select] prompts a user to an answer, but provides flexibility for questions that need it. The tool uses the browser’s native select list for its overflow, meaning it will work great on all devices.

It’s been tested with jQuery 2, Internet Explorer 11+, Firefox 40+, Chrome 45+, Safari 8+, Chrome on Android and iOS and Safari on iOS, so it should work properly in most applications. Just download the source files from GitHub, include the JS and CSS tags, attach Quick[select] to the appropriate boxes and you are ready to go!

There are a handful of option classes available and some great examples of how to use this tool in the documentation.

  • Spotlight

jCalculator: jQuery Plugin for Calculator Inputs

jCalculator is an awesome jQuery plugin for calculator inputs.

What’s nifty about this tool is that you can add a calculator to almost any frame within a layout. Need a calculation in a search box? No problem.

The simple calculator design fits into a variety of aesthetics and performs all the basic functions you would expect, such as addition, subtraction, multiplication and division. The tool just pops up when the use navigates to the proper location on the screen. You figure and then keep figuring numbers using the keyboard or mouse with answers populating right on screen.

Plus jCalculator is easy to install and run. Just include the proper lines of code before the body tag close. (You can fin everything you need in the documentation.) Then call the plugin. That’s it!


Stretchy: Form Element Autosizing

Stretchy makes form element autosizing the way it should be, meaning that every text element box in your design expands to fit text inputs beautifully. (Everybody likes when things just happen automatically, right?)

This plugin can handle multiple form controls from text areas to inputs to selection menus. It has a tiny footprint at only 1.5 kb minified and is a standalone tool with no jQuery or other dependencies. It works with existing HTML and CSS — a real bonus if you want to add it to a site you already have. Stretchy also automatically accounts for newly added controls, requires to javascript knowledge to use and works in all modern web browsers, including Internet Explorer 9+.

Stretchy has a spartan API, since in most cases you don’t need to call it at all. Stretchy works via event delegation and detects new elements via mutation observers, so you do not need to call any API methods for adding new elements via scripting (e.g. AJAX), but if you do need API methods, they are available in the documentation.

To use, just include the script anywhere in the website and you are ready to go!

  • Vanilla

Dragula: Drag and Drop Plugin

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.

  • Vanilla

List.js: Library for Search, Sort and Filters

List.js is the perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. It is built to be invisible and work on existing HTML.

Features of List.js include that it is simple and invisible, easy to apply to pretty much any HTML, has no dependencies, is fast and super lightweight and can handle thousands of items. It includes a simple template system that adds the possibility of editing, adding or removing items.

It works with modern browsers including Chrome, Safari, Firefox and Internet Explorer 6+.

Examples of usage include partnering List.js with an existing list, with an existing list plus adds, a new list, tables, fuzzy search and pagination.

The tool includes extensive documentation to help you install and use this tool with ease. List and item APIs are also available.


Evol.ColorPicker: Web Color Picker

This web color picker works very much like the color tools in Microsoft Office 2010 for a UI widget that is intuitive. The Evol.ColorPicker plugin works inline or as a popup bound to a text box.

The plugin comes ready to go with a few preset color themes including light, dark, redmond, sunny and le-frog.

When displayed, the tool shows as a box containing theme and standard colors, allowing a click to choose each color selection. Each clicked color also displays its value for even more ease of use. The tool also includes a honeycomb-style color picker that displays varying hues and color values.

Evol.ColorPicker requires a jQuery UI theme to be present and the included base CSS file. Add the proper tagging, and the widget is ready to use.

It also comes with a few customization options such as the default color value, default color palette, type of display indicator, history, hide and show options and transparency. The plugin works with modern browsers and has been tested with Internet Explorer 7+, Firefox 9+, Chrome 21+ and Safari 5+.

This nifty little tool is nice because of its intuitive nature; it looks like something most users are already comfortable using.


datedropper: jQuery Dates Plugin

datedropper is a jQuery dates plugin that provides a quick and easy way to manage dates for input fields.

It supports 16 different language formats and is easy to use. The plugin only requires three bits of code for activation — head, body and end. The tool is also easy to modify so that it fits the aesthetics of any website outline — just edit the CSS in the datedropper folder and you’ll have a custom plugin.

This tool has plenty of practical applications. Use it to add dates to an an or website, set an itinerary for an upcoming event or even set an expiration date for a digital product.

When it comes to customization, you have plenty of options to choose from there as well; alter the date format, animation style, colors, language, text, number of years included, borders and strokes, shadows and boxed elements. And you can do it all with just a few clicks with datedropper. Find it on GitHub and see for yourself.

  • Vanilla

Rate Yo!: jQuery Star Rating Plugin

This tiny and flexible jQuery star rating plugin is just what you need to add super star ratings to your website. What makes it even better is that no images are required to make Rate Yo! work like a charm.

The plugin includes five stars from your created <div/> and some styles of your choice. Nifty hover actions make it easy for users to click to rate by filling stars with a color.

Rate Yo! is packed with options so you can make this rating plugin your own. You can change the width and size of stars, number of stars used, colors, fill options, spacing and animated options. (This is a robust set of options that make it easy to customize this plugin to your website’s style and color scheme.)

One of the coolest features of this plugin is the low to high rating, which allows you to change the color of stars from one color to the next based on value.

And because the plugin does not sure actual images, the lightweight code is lightning-fast and you’ll never have to worry about render issues. It’s a great solution for anyone looking for a rating tool.

  • Vanilla

rangeslider: jQuery Polyfill for the HTML5 Slider

This simple, small and fast jQuery polyfill for the HTML5 slider element looks great and works like a charm.

The rangeslider plugin is touchscreen friendly, recalculates onresize making it suitable for use in responsive designs, is small and fast and supports all major browsers including IE8+.

With plenty of numerical slider options, this little tool allows you to visualize negative attributes, floating point boundaries, programmatic value changes, programmatic attribute changes, destroy a plugin instance and more.

Installation of rangeslider is easy with Bower or NPM, but you can also download and install manually. Configuration is simple as well; all you need is a few lines of code. The rangeslider.js API is compatible with the standard HTML input methods.

The developer is open to suggestions and has released multiple updates for this plugin in order to make it even better.


Payment Info: Mobile Friendly Credit Card Input Tool

Payment Info is a one-line, mobile friendly credit card input tool. The idea behind this plugin is to create a more streamlined credit card entry process.

The plugin was inspired by Luke Wroblewski’s thoughts on streamlining the collection of payment information by using input masks:

“Input masks constrain text entries to help people avoid mistakes. For example, a phone number input mask could only accept numeric entries and ignore any alphabetic characters or punctuation. Acceptable numbers could be limited to just a range, a specific pattern, or a combination. Input masks don’t just prevent errors, they can also guide people by presenting and maintaining input hints like specific formatting requirements. And last but not least, input masks can integrate multiple questions into logical sequences, keeping people from having to move between multiple input fields in a form.”

This is the concept employed by this simple plugin. The tool helps to seamlessly guide the user through the needed inputs to complete a transaction, but without having to navigate through multiple fields to accomplish this task.

Payment Info results in an easy tool that contributes to usability for your website.


Formplate: Style Forms Uniformly Across all Devices

This small plugin to style forms uniformly across all devices is easy to use and customize.

Formplate is available as a downloadable zip file, on Github and is also included automatically with Webplate downloads.

The plugin is best installed using Bowser and integrating Formplate requires jQuery and Modernizr, as well as dropping a copy of the css/icon-font-formplate folder into the CSS folder where the plugin will reside. Then to activate, you need to wrap form elements in a containing element with the class formplate and call the formplate plugin.

Then you are ready to use. The final step is to customize the plugin with a color scheme that matches your site aesthetic. You can also choose the desired color of your form hover and active states by adding a data attribute to the body tag. The color selections are grey, black, white, aqua, blue, green, orange, pink, purple, red, yellow, asbestos, asphalt, bondi-blue, grey-blue and silver.