Grow your CSS skills. Land your dream job.

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

Comments

  1. Permalink to comment#

    I generally like the idea of adding a little more interaction, but one of the top usability rules by Jakob Nielsen is:

    You should never have to tell somebody
    where to click.

    But I don’t see any other way how to achieve this here. Maybe a fading in menu directly on the card, when its being clicked/dragged.

    One more thing: The slidedown menu is a cool effect, but i am not sure if it is the proper place for a search bar and the special offer. My opinion is that both of these should be visible at all times and really get attention..

  2. Permalink to comment#

    Wow, the attention to detail in the design of the baseball cards is amazing. I love how they each reflect that old style of card too, with the images de-saturated.

    The overall layout of the site looks amazing too. I’m going to have to remember this one for some upcoming client work.

    Nicely done.

  3. Bill Gates
    Permalink to comment#

    Doesn’t work in IE6 (although I don’t blame you). Seems a bit gimmicky, the whole drag and drop effect. It’s nice the first time but if I had to repeatedly visit the site it would get old fast. Also it seems buggy. I tried to drag a card which was under a few other cards, yet clearly not obstructed by them, and I ended up dragging a completely different card which seemed to exist above it. If you are going to keep it, I’d recommend also adding a simple border glow effect for when your mouse moves over a card to attract attention to the fact that a card can be moved.

  4. Permalink to comment#

    I agree that “you shouldn’t have to tell users where to click” and that the idea is kind of “gimicky”, but, the whole area is just kind of a fun branding thing. As I mentioned, it just needs to drive home the fact that the company is a products company, which I think it does even if you never even notice you can interact with the cards.

    If they were main navigation, or were in any way required to go to different places on the site, it would be problematic. They are not.

    I should have mentioned that IE 6 has it’s own special treatment. There is simply a flat image of all the cards (slightly different layout) with a clickable image map over it to keep the functionality.

  5. Matt
    Permalink to comment#

    Very nice effect! Love the use of the “classic card” look. What shopping art are you using for the site? Keep up the good work.

  6. elvisparsley
    Permalink to comment#

    Technically it looks great. But practically I can’t see the point to use draggable for this purpose though.
    Thanks for sharing.

  7. Zach LeBar
    Permalink to comment#

    hey chris,

    I love this idea, and yeah, while it is gimmicky and all, i i think its a good use of a gimmick. It’s not the navigation of the site, it’s just a neat little thing to grab peoples attention. i may have some work coming up that would be a cool use of this effect. thanks for the insightful post.

    -zach

  8. Permalink to comment#

    Fun exercise and looks great, but really not very usable.

  9. Permalink to comment#

    Hi,

    Same idea here : http://www.jaysalvat.com/

  10. Mr T-San
    Permalink to comment#

    Chris, forget about the Bah Humbugs! I think it’s a very fresh and innovative way to do a site. You have taken the click and feature and done something totally original, baseball cards, YEAH! For those that are all about usability; go to a batting cage like the one’s sold on Beacon and get out your anger — cause in the end you’ll have your usability doldrums to bang on and Chris will have his innovative website that could push usability to the next stage of web design.

  11. Permalink to comment#

    Whoa!, yeah like Mr T-San said, forget the naysayers, I think its an awesome idea and site.

  12. Permalink to comment#

    love it chris! one thing, i think somewhere there should be a button or at least some way of resetting the cards back to their original place.

  13. Mixedbrains
    Permalink to comment#

    I Really like it.Obviously these things take time to iron out. Look how long flash took to get off the ground. Um.. ok bad example.. It Sucks. But that’s ok.

    Looking to the future, this type of interface will become less clumsy as we start to use computers like perceptivepixel is creating or Virtual Reality. Using your hand to move things around is the future instead of these static 2d enviroments.

    The only downside? Every time I look at those perceptivepixel computers I think of Tom Cruise from that one movie Ahhhhh…….

  14. Permalink to comment#

    Man, Chris your site has helped me so much in learning how to grasp this css and java stuff. I am happy to say “I will no longer be sticking tables inside of tables”.

    I used the Drag ‘n Drop for my drawings and vector art pages.

    http://www.cssmelo.com/vectorart.html

    Thanks,
    madMELO

  15. Permalink to comment#

    I really love the effect. I think that it works well with the theme of the site. The cards look great and the function behind them is fun. Sports are fun and the site should be as well. Why not let the consumer play a bit while they are there.

    I can also see that functionality being used in many other formats. My site needs a refresh and I am always looking for fun now tips and tricks. Keep it up Chris. This one rank high.

  16. Permalink to comment#

    Chris, this is fantastic! How much fun was it to recreate all those vintage baseball cards? They look perfect! All kinds of inspiration on this site. Can’t go wrong with anything baseball related… unless, of course, you are the Detroit Tigers. Only a few more days to endure of this train wreck of a season…

    I really need to follow your tuts to get a better handle on the technical end of things. I’m one of those struggling design people that is lacking in the technical/programming areas. I need to DO all of the things I’ve read already…

    Now if you only taught Greek and Italian, then I’d be all set. :)

  17. Permalink to comment#

    looks great, I will try

  18. Permalink to comment#

    Nice one Chris, good luck with the launch.

    As a ‘first time viewer” for me, I was intruiged, and had fun interacting with the cards. People need to stop, take time, and fully engage themselves in websites like this to appreciate the thought and work that goes into them.

    Unfortunately, many people look at the web as a “fast food” resource, and demand the contents be spoon fed to them instantly. let them play, as Brian says. MixedBrains comment was right, look to the future of interaction. One day we will not be governed by poor browser support and clumsy methods of interaction. No touch screens mate, think direct interaction with your brain =) .. ok, enough fantasy, back onto this marvellous website.

    Jquery really is a godsend for designers and developers, and you’ve put it to great use. Thanks for your tutes, keep the great work rolling!

  19. Awesome! it’s very nice!

    Do you know if it’s supported in IE6?

  20. J
    Permalink to comment#

    The link to the jQuery site is broken…what is the link to download the materials?
    Please help, Thanks!

  21. Permalink to comment#

    Hi there.. great site. I was just making something like this and I found your site searching for any info about it.. there seems to be relatively little to find out about the jquery ui searching google. You mentioned that you had an alternate display that was shown to users viewing in IE6. I am curious how you did that.. would you mind sharing? The search quest that brought me here was trying to find a way to constrain all of the draggables within a parent div so they can not be dragged all over the page. I never figured it out…and it seems your sample is the same way.. anyways.. great site… looks to have some good tutorials too. Cheers.

  22. Permalink to comment#

    Hey Chris, I just wanted to say that I used this neat trick and other tips that you shared to create a new website for the firm I work for. Thank you for introducing me to the world of JQuery! Keep up the good work and I will keep checking back to stay updated on the latest in CSS-tricks! I would appreciate it if you get a chance to check out my website and drop me a line with your first impressions.

  23. Permalink to comment#

    I forgot to mention though, that instead of using JQuery UI and I used a lighter plugin that only does draggables called PPDrag. It produces pretty much the same effect but has a smaller .js file and is therefore slightly faster.

  24. Permalink to comment#

    Demo site down?

  25. Aaron
    Permalink to comment#

    Can you post a link to this in action? It’s no longer up at the site…

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".