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.

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.

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.

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:

• Leave a comment below telling us what your favorite template from IM Creator is (view their collection and please share the link)
• “Like” IM Creator page on facebook.com/imcreator

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 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.

Gridster is an impressive jQuery plugin to develop iGoogle-like multi-column grids that can be drag 'n' dropped and re-ordered.

The plugin only requires jQuery (no jQuery UI) and can convert any given HTML structure into the widgets of the grid.

And, we are not limited with the elements loaded initially but can add and remove new ones dynamically.

The number of columns/rows, margins between items and required styles being generated automatically can all be set.

Also, there callbacks on every level and a .serialize command returns the positions of all the widgets anytime we want.

The drag 'n'drop interactions of jQuery UI (draggable, droppable and sortable) are probably the most popular solutions out there.

However, if you don't want to use jQuery UI just for this and would like to go with only a jQuery plugin, here it is: HTML5 Sortable.

This plugin uses the native HTML5 drag and drop API for creating sortable lists/grids and provides a similar API + behavior when compared to jQuery UI's sortable.

It is lightweight (<1kb when minified/gzipped), supports "connected lists (moving items between different lists)" and works in all major browsers.

Wix, the widely-used online website builder which is known with its Flash-based platform, has launched a HTML5 version.

The new website builder is now compatible with the majority of browsers, works on mobile too and loads much faster.

It is a well-designed/planned product where a basic computer user can't go wrong with anything and a designer feels the flexibility it provides.

There are 50+ ready-to-use templates (with multiple color palettes each) to choose from where you can use them as a base or build a website from scratch.

The websites are created/updated while browsing. You can select any element, edit them or add new items like content, images, videos.. anything.

Wix's HTML5 platform is completely drag 'n' drop enabled where you can move elements easily or copy/cut-paste them using the keyboard to work faster.

It allows creating new pages and adding components like a gallery, social widgets, good-looking buttons, contact forms, maps, Flickr gallery and much more.

Although things are very straightforward, the steps and menus are pretty guiding and you never get lost or confused.

Creating a website with Wix is free and premium features (like using a custom domain or analytics support) requires a premium account.

How to join the giveaway?

Wix is giving away 3 annual "Combo" planned account upgrades ($99/year value) to WRD readers.

If you want to create HTML Websites throughout the piece, join the giveaway you can choose one of the methods below or do both to increase your chances:

• comment to this post
• tweet this post (click to tweet easily)

Winners will be selected randomly on 3 April 2012 (1 week later). Good luck to all.

The winners

Here are the winners:

• @zwitserland
• Soku Massimo (comment #549310)
• Ana María Catillo (comment #546208)

Congratulations and thanks to everyone for joining.

For anyone with design and HTML/CSS development expertise, creating a website from scratch is all about creativity as, usually, there is no technology to get stuck at.

However, for designers (and non-designers) without HTML/CSS experience, converting a design into a fully-functional website is pretty hard.

IM-Creator is a drag 'n' drop website creator that eases the process of building a HTML website so easy. And, they are giving away 3 "lifetime" licenses to WRD readers.

The application has a set of ready-to-use and stylish templates to choose from where they can be used as a base and customized with custom images + content just by selecting /editing each item.

Another option is to start with a blank page which is the way to go if you have a JPG/PNG mockup and want to slice + position each item accordingly.

Here are some of the templates offered (click each to preview):

There are lots of elements that can be inserted into web pages like images, videos, image galleries, slideshows or contact forms.

Also, various widgets can be instantly integrated including Twitter feeds, Google Maps, SoundCloud, Tumblr blogs and more.

If you are not a web designer and/or prejudiced on web-based website creators, give IM-Creator a chance and you'll probably be impressed with the simplicity.

How to join the giveaway?

In order to win one of the "lifetime" licenses (normally priced: $95/annual), just comment to this post and winners will be selected with the query below randomly on 21 Feb 2012 (1 week later).

SELECT * FROM wp_comments WHERE comment_post_id=2829 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 3

Good luck to everyone.

The winners

Here are the lucky WRD readers:

• Ali DHIBI (comment #517562)
• chris (comment #516825)
• Paul Becker (comment #517111)

Congratulations and thanks to everyone for joining.