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.