Connect With WRD
feed via e-mail
feed via e-mail

Posts Tagged ‘Drag ‘n’ Drop’

When it comes to drag ‘n’ drop and reordering elements with JavaScript, jQuery UI’s sortable widget is by far the most popular.

There is also a tutorial at WRD for using it with server-side scripting.

Sortable is a JavaScript library that performs the same task without any JavaScript framework.


It uses the native HTML5 drag and drop API, has a small footprint (<2kb gzipped) and works on touch devices too.

Also, besides single lists, items can be moved between multiple lists too.

When sharing designs with teammates or customers, sending them via e-mail or other ways is usually a bad way of presenting and hard to track

WebProjector is a free web-based tool that is built just for this. We can simply upload images via drag ‘n drops, send a link via e-mail and the images are presented in the order we prefer.


The tool also notifies us when they are viewed or number of views and it can wrap our designs in mobile, tablet or desktop frames for a more realistic view.

Additionally, it is possible to get comments on each design too.

Raw is a free and open source web application for visualizing data flexibly and as easy as possible.

It actually defines itself as “the missing link between spreadsheet applications and vector graphics editors”.

Raw - D3 Data Visualizations

The application works by loading a dataset by copy-posting or drag ‘n’ dropping and allows us to customize the view/hierarchy.

Raw is based on the popular D3.js and supports lots of different chart types like bubble, treemap, circle packing and more.

Installing Raw is pretty straightforward as everything works client-side.

You’ll remember ioDeck, the self-hosted form builder application for creating forms and handling the responses with almost zero effort.

FormBuilder.js is a client-side (HTML-CSS-JavaScript) resource for creating such form builders.

It provides the interface that supports inserting input types and re-ordering them with drag ‘n’ drops.


The form view is generated as a JSON data and FormBuilder.js doesn’t provide the code for “how the rest will be handled (saving the form, keeping the responses, etc.)”.

Simply, the resource is just the client-side engine that provides the hard-work + its logic.

We sometimes need to pick an element from an image by clipping it and this usually takes some time.

Clipping Magic is a free and web-based tool that simplifies this very much.

Clipping Magic

It is built by the Vector Magic team, who are already experienced in the field, and works by simply:

  • uploading an image with drag ‘n’ drop
  • choosing the foreground and background
  • downloading the result with removed background

The tool works very well with elements that have visible borders and a must-bookmark for anyone willing to improve their online-only toolbox.

IM Creator is a very easy to use and hosted website builder that allows anyone to create good-looking websites without diving into any HTML-CSS or JavaScript.

There are many creative templates to choose from where all of them are optimized for search engines and looking good on mobile too.

IM Creator Bio Template

Once the template is picked from a well-categorized list (it is also possible to start with a blank template), the site can be edited live with drag ‘n’ drops.

Inserting new galleries, slideshows, contact forms or menus is just a click away. All of them presented nicely and user-friendly.

One of the most frequent jobs while creating a website, editing images are also handled within IM Creator. There is a built-in image editor for resizing or cropping images.

IM Creator Photographer Template

Also, there are lots of widgets to enhance the website like Google Maps, Twitter timeline, SoundVCloud, Vimeo, Facebook and more.

Websites can integrate with any Google Analytics account, come with free e-mail accounts and new templates are introduced regularly.

How to join the giveaway?

3 lifetime subscriptions (valued $95/year) are being given away. In order to join:

Winners will be announced a week later (13 May 2013) and announced here. Good luck to all.

The winners

Here they are:

  • Ciril Trcek (comment #1264273)
  • Firebit (comment #1264343)
  • Lukas Janda (comment #1264236)

Congratulations to the winners and thanks to everyone for being a part of this giveaway.

The “Draggable” and “Droppable” interactions of jQuery UI are by far the most popular solution for drag ‘n’ dropping elements.

For anyone in search of an alternative, Draggabilly, a standalone and lightweight JavaScript library can be the right choice.


The element to be dragged can be limited to have that feature in a container and there are callbacks on each event (start, move, end) which can also return the position/location of the item.

It works in all modern browsers (IE8+) and there is built-in support for touch events.

Dropzone.js is a JavaScript library that simplifies creating a drag ‘n’ drop file upload functionality.

It works with jQuery and works almost out-of-the-box by giving a special class name to any form.

Multiple files can be uploaded at the same time where previews of images can be displayed as well.


There are also options for defining the max file size, thumbnail dimensions (if they will be generated), enable/disable previews and more.

And many events exist for interacting with the drag-drop and upload status.

Drag ‘n’ dropping items has its various popular uses and shopping carts are definitely one of them.

In this tutorial, we’ll be creating a simple shopping cart that works with drag ‘n’ drops.

It will have support for add-to-basket with quantity updates (so that the same items could be added more than once) and removing items from the basket. It will be totally client-side and cover the basic functionality (no PayPal integration, etc.).

For that, we’ll be using, probably the best drag-drop library, jQuery UI Draggable/Droppable in this tutorial. Here is the end result:


Let’s get started:

Step 1 -> Get the custom jQuery UI package

jQuery UI Custom Download

jQuery UI has lots of features and every feature adds bytes to its source, it is much more smarter to get only what we need.

As you can see from the screenshot above, we need the Core, Widget, Mouse from the core and Draggable + Droppable from the interactions.
Read the rest of this entry »

FileDrop is a JavaScript class for quickly creating drag 'n' drop file upload interfaces.

The class doesn't require any JavaScript frameworks and works cross-browser, including IE6 (with iFrame fallback).


It has support for multiple file uploads, there are callbacks on many events and any number of FileDrop uploaders can be used in the same page.

Also, the size of the class is lightweight (3.5 gzipped) and its API is well-documented.

Uptime Robot