drag and drop

Drag-and-Drop with jQuery: Your Essential Guide

17 February 2011 / 128 Comments

Dragging and dropping can be a very intuitive way for users to interact with your site or web app. People often use drag-and-drop for things like:

Moving email messages into folders
Reordering lists of items
Moving objects in games around, such as cards and puzzle pieces

Drag-and-drop with JavaScript used to be very hard to do — in fact, getting a decent cross-browser version working was next to impossible. However, with modern browsers and a smattering of jQuery, drag-and-drop is now a piece of cake!

In this tutorial we’ll take a look at how to create drag-and-drop interfaces with jQuery, and we’ll finish with a complete drag-and-drop example: a simple number cards game for kids.

Kitchen Table: A Slick Photo Light Table Using CSS3 and jQuery

11 June 2010 / 14 Comments

View Demo »
Download Code

In this tutorial you’re going to learn how to create a virtual light table using jQuery and CSS3. A traditional light table is a flat illuminated panel that you can place transparent slides on for viewing. Our “light table” is going to be an image of a wooden kitchen table, and the photos will be prints rather than transparencies, but the basic idea is the same!

The aim is to make our table and photos look as realistic as possible. Here’s our desired feature list:

A wooden table background image for the photos to sit on
Each photo “floats” onto the table as it loads
Each photo is given a random position and orientation to create a “scattered” effect
The photos have a white border and drop shadow to add a 3D effect, and are ever-so-slightly transparent
Once on the table, a photo can be dragged around by using the mouse

Ready? Let’s go!

WinSCP Tutorial – How to Upload Your Site with WinSCP

17 May 2010 / Leave a Comment

WinSCP is a popular free FTP program for Windows. An FTP program lets you transfer files between your computer and your Web server.

In this introductory tutorial, you’ll learn how to use WinSCP to upload your website’s files to your server.

This tutorial assumes you’ve already downloaded and installed WinSCP. It also assumes you’re using WinSCP with the “Commander” interface, rather than the “Explorer” interface. (To change interfaces in WinSCP, choose Options > Preferences, then click the Interface option and select either Commander or Explorer.)

What Is jQuery?

4 February 2010 / 2 Comments

In this series of tutorials I’m going to explore jQuery — “The Write Less, Do More JavaScript Library”. If you code using JavaScript then you’ve probably already heard of jQuery — it’s by far the most popular JavaScript library in use today. For example, Microsoft, Twitter and ESPN all use jQuery on their sites.

To kick off the series, this article explains what jQuery is, and the kinds of things you can use it for.

[Read more…] about What Is jQuery?

FileZilla Tutorial – How to Upload Your Site with FileZilla

20 July 2009 / 2 Comments

In this tutorial you learn how to upload your website using FileZilla, the popular free FTP application. FileZilla is available for Windows, Mac and Linux. This tutorial features Mac screenshots, but the techniques also apply if you’re running FileZilla on Windows or Linux.

drag and drop

Footer

Contact Matt

Follow Matt