Treehouse

Hot Effect: MooTools Drag Opacity

By on  
MooTools Drag Opacity

As you should already know, the best visual features of a website are usually held within the most subtle of details. One simple trick that usually makes a big different is the use of opacity and fading. Another awesome MooTools functionality is dragging. Why not double the awesomeness of Element dragging by adding fading?

The MooTools JavaScript

window.addEvent('domready',function() {
	var z = 2;
	$$('.draggable').each(function(el) {
		var drag = new Drag.Move(el,{
			grid: false,
			preventDefault: true,
			onStart: function() {
				el.setStyle('z-index',z++).fade(0.5);
			},
			onComplete: function() {
				el.fade(1);
			}
		});
	});
});

The code itself is quite simple -- we use Drag.Move's onStart and onComplete events to begin and end the fading. We've chosen to fade to the desired opacity level over a given duration because a subtle fade is a bit less drastic. We could simply use set('opacity','0.5') if we wanted an immediate fade.

I consider the above effect a "cheap" way to increase the coolness of element dragging. Very little overhead and just another effect to take your website to the next level!

ydkjs-1.png

Recent Features

  • Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating:

  • Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else?...

  • Create a Sheen Logo Effect with CSS

    I was inspired when I first saw Addy Osmani's original ShineTime blog post.  The hover sheen effect is simple but awesome.  When I started my blog redesign, I really wanted to use a sheen effect with my...

Incredible Demos

  • Fullscreen API

    As we move toward more true web applications, our JavaScript APIs are doing their best to keep up.  One very simple but useful new JavaScript API is the Fullscreen API.  The Fullscreen API provides a programmatic way to request fullscreen...

  • Input Incrementer and Decrementer with MooTools

    Chris Coyier's CSS-Tricks blog is everything mine isn't. Chris' blog is rock star popular, mine is not. Chris prefers jQuery, I prefer MooTools. Chris does posts with practical solutions, I do posts about stupid...

  • Six Degrees of Kevin Bacon Using MooTools 1.2

    As you can probably tell, I try to mix some fun in with my MooTools madness but I also try to make my examples as practical as possible. Well...this may not be one of those times. I love movies and...

Discussion

  1. wow, that is a really nice effect. i lub ur blog

  2. I recently found the Drag.Ghost extension at http://www.monkeyphysics.com/mootools/script/1/dragghost

    It’s the only way I do drag/drop with mootools these days. A very handy extension.

  3. Hey, I’m not seeing this work so well. Shouldn’t the box always pop up on top when dragging? I’m seeing it sometimes stay behind the other boxes. (I’m using Google Chrome 3.0.195.38)

  4. @Dwight Blubaugh: Good catch — I’ve updated the code to prevent that issue. w00t!

  5. Better, but now only on the first time drag the box will go transparent and only be in front of boxes to the left.

  6. @Dwight Blubaugh: Good catch — was only happening on the first drag so I’ve upped the starting number to 2 and that seems to have fixed the issue.

  7. Vitor

    Also just a question, why does the box changes shape when you drag it to the top of the adds?

    Looks really nice!!!

  8. @vitor – I can only guess that it’s because the drag boxes don’t have a fixed with, so when they get to the right side of their parent they try to adjust their shape to fit inside. See how the text changes also?

  9. If i set a width on them (through firebug) then they don’t adjust shape… Interesting quirk…

  10. Love the z-index trick to keep them on top David.

    @vivitor: `position: absolute` block elements with `width: auto` set their width similar to floated elements, just enough for the content inside + padding + border. Each box has the same text, therefore the same width. When they hit the side of the parent element the width adjusts accordingly.

    Pop open the inspector and change the text inside one and you’ll see the width changes to accomadate it.

  11. What if I’d like to prevent the boxes to be moved on some part of the page (header, for instance?)

  12. Wow, awesome feature.

  13. @marcoverga: http://mootools.net/docs/more/Drag/Drag#Drag:stop

    Check the position of the element relative to whatever you want and then call stop();

  14. great effect. i will use it in my next projects

  15. Alex

    monkeyphysics plug in +1

  16. leo

    when you click the block that can be move to top…..

  17. This code is really small, nothing complicated, as looked like.we can set as well for how long is going to work. Really good stuff, java make it easier.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Use Code Editor