Drag ‘n Drop Cards

Published by Chris Coyier

In the next week or so we are launching refreshed site for one of our clients at Chatman Design. The client is Beacon Athletics, a company that sells equipment for athletic fields. The homepage is of course of particular importance. Over the past year or so, their current homepage had become quite cluttered as different areas of the site were added and every section was vying for attention. The bottom line, is that Beacon is a company that sells products and the homepage needs to be very clear on that subject. Secondarily, it needs to communicate that Beacon are experts on Athletic Fields. Buying from them isn't like buying from WalMart. They are a team of renowned professionals that will help you get exactly what you need. Also (obviously), the page needs to be visually appealing, usable, and accessible, and not be so far out in "left field" that it confuses current users.

Our solution attempts to tackle all these issues while de-cluttering at the same time. The solution is a "pile" of throwback baseball cards (real designs from yesteryear) redesigned with many different popular Beacon products.

I think the design of the cards and overall layout is pretty nice, but to add some extra flair, we used the jQuery UI's "Draggable" ability. With this, we made each card a unique object that you can click-and-drag around the screen, to get a better view of the cards, and ultimately, to visit the store page corresponding with that card.

Each image is an alpha-transparent PNG (for the shadow) and has a class name of "draggable". The cards are placed with absolute positioning. To make it happen, we just include jQuery and our custom-built jQuery UI download on the page, and call the new draggable function on those images.

<script type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-personalized-1.6b.packed.js"></script>
<script type="text/javascript">
   $(function(){
		$(".draggable").draggable({
			zIndex: "7000"
		});
	});
</script>

The zIndex parameter is just a "helper" here, in that it temporarily applies that zIndex value while you are dragging the card. That is very helpful, but we aren't quite there yet. Because that is only temporary, the stacking order of the cards will always be the same. We wanted it so that lower down cards would pop to the top when clicked on. In order to get that done, we bind a "click" event to the cards that resets all cards down to a z-index value of 5000, and then the current card back up to 6000. This ensures that the card currently being dragged is always on top, and will remain on top when is done being dragged!

$(".draggable").click(function(){
	$(".draggable").css({
		"zIndex": "5000"
	});
	$(this).css({
		"zIndex": "6000"
	});
});

For the final touch, we wanted to make a way to that you could visit the page within the website that each card was referring to. For this, we bound a "double-click" even to each card as well. To get the proper URL, we gave each image a "rel" tag which included that. Then when the double-click even occurs, the window location is set to that value.

$(".draggable").dblclick(function(){
	window.location=$(this).attr("rel");
	return false;
});

Double-clicking things on the web is a little unusual and not very intuitive, so a very short one-sentence instruction was placed below the cards explaining.

Works pretty well. We have a temporary demo site up you can see it in action. This effect is now live on their site. You may notice some other jQuery action on the page. The little blue tab has a fun little pop-down effect revealing some recent news, site search, and product promotions. The homepage also features a "garage door".