Drag provider – the good stuff
Dragdealer is a drag-based JavaScript component that embraces endless front-end solutions. Elegantly crafted for JavaScript-aware coders.
2D drag and tap, mouse and touch (mobile tested), 12kB unminified. No dependency.
Take a look through all the demos below to understand how it works.
<div id="my-slider" class="dragdealer"> <div class="red-bar handle">drag me</div> </div>
red bar is the default red bar-looking handle. It's a separate class so you can easily remove it if you want your handle to be something completely different, and not have to reset all its CSS properties.
Dragdealer Dragdealer(Mixed wrapper [, Object options ])
Function (Number x, Number y)
No-options slider. Does nothing, but slide, of course. Slide the red handle by dragging or tapping (and hold) outside it, on its rail.
new Dragdealer('simple-slider');
A quick vertical example. Uses the animation callback to scroll a clipped content and has the yPrecision set to its height.
yPrecision provides a proper smooth slide, since the animated content is higher than the slider.
new Dragdealer('scroll-bar',
{
horizontal: false,
vertical: true,
yPrecision: content.offsetHeight,
animationCallback: function(x, y)
{
var margin = y * (content.offsetHeight - mask.offsetHeight);
content.style.marginTop = String(-margin) + 'px';
}
});
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut lorem diam, at tincidunt libero. Integer sodales nulla a turpis pulvinar vel aliquet sem laoreet. Sed imperdiet nunc et metus dapibus suscipit. Fusce suscipit ultricies nisl laoreet scelerisque. In lectus lorem, rutrum sed blandit sed, tincidunt eget libero. Quisque at orci eget ligula iaculis eleifend vitae at quam. Donec molestie facilisis dolor, ut viverra lacus hendrerit id. Sed in arcu sed eros iaculis faucibus. Aenean iaculis pharetra nisl nec ultrices. Nulla nec libero nec ante pharetra pharetra ac non dui. Donec id laoreet enim. Phasellus id metus sapien.
Curabitur malesuada ante nec tellus suscipit rutrum a at lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce eu est nibh. Pellentesque id magna sapien, at rhoncus neque. In aliquam, justo id lobortis mollis, ligula mi porttitor massa, id condimentum ipsum magna et sem. Nulla semper nulla eu nunc consectetur at egestas ligula vulputate. Proin aliquam porttitor ultrices. Donec sodales, lectus id commodo cursus, arcu nibh molestie risus, nec convallis massa mi in velit. Nam condimentum luctus augue a malesuada. Phasellus hendrerit interdum mattis. Etiam dolor nibh, convallis sed ultricies nec, imperdiet sed nibh. Morbi magna nibh, aliquet et fermentum eu, tempor id eros. Praesent pharetra malesuada sem ac egestas.
Donec ut leo elit. Duis vitae fermentum elit. Pellentesque pulvinar, nunc vel pharetra porttitor, ipsum risus mattis nunc, tempor malesuada nulla felis fringilla leo. Curabitur rhoncus enim vitae nibh imperdiet in varius erat dapibus. Sed fringilla mi lorem. Curabitur at sapien diam, id mollis nulla. Donec laoreet placerat felis. Nulla facilisi. Mauris eu nulla ac sem facilisis commodo. Ut ligula nisi, tempus tincidunt tristique vel, cursus a nibh. Nulla cursus pulvinar libero, in blandit est porta in. Duis elementum metus in augue auctor mattis. Aenean sit amet placerat purus. Praesent nec felis vitae tortor sodales pretium ac sed nulla. Suspendisse sit amet sem id metus porttitor bibendum a sed lectus. In sit amet erat leo. Nam pharetra luctus ullamcorper. Nullam semper velit et orci rhoncus vel pellentesque lacus hendrerit.
Vivamus ultrices metus non nunc venenatis ac feugiat ipsum porta. Integer porttitor tincidunt imperdiet. Sed consequat, dolor ac luctus mattis, arcu enim scelerisque risus, ut aliquet urna lacus ac sapien. Vestibulum pharetra lectus quis sapien ultricies nec placerat augue varius. Nunc suscipit accumsan neque faucibus tincidunt. Nam consequat interdum leo, nec vehicula velit scelerisque eget. Etiam mattis rutrum massa, et ullamcorper arcu iaculis id. Morbi eget ipsum non justo accumsan auctor eu in ligula. Integer imperdiet venenatis augue, at imperdiet metus pharetra vel. Proin augue urna, bibendum at pretium vitae, vestibulum nec velit. Nam sed justo gravida ante ullamcorper blandit vitae nec nisl. Nam ligula purus, eleifend at dictum sit amet, congue posuere turpis. Sed dui urna, venenatis in sodales imperdiet, malesuada ac turpis. Pellentesque nec rhoncus elit. Quisque condimentum iaculis arcu, vitae consequat purus adipiscing ut. Aliquam placerat felis eu ipsum venenatis consequat. Fusce pellentesque orci et orci malesuada sit amet mattis justo gravida.
Proin malesuada, orci non vehicula convallis, libero magna ullamcorper nisl, in euismod odio nisl eu mauris. Mauris sed suscipit nisi. Ut sed dui lectus. Vivamus rhoncus porta ornare. Pellentesque nec tincidunt dolor. Nullam ornare purus venenatis ipsum placerat eu sollicitudin mauris porttitor. Proin sit amet leo at nibh fermentum pharetra. Fusce euismod sapien vel odio ultricies venenatis facilisis massa consectetur. Aenean pulvinar ornare elementum. Sed ante purus, viverra eget accumsan ac, euismod non nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Please note that this is not may not the most complex scroll-bar implementation, but rather a simple one. You could enhance it, but that's not the purpose of this demos.
Controlling is one of the things Dragdealer does best. It's using a block of text here, even though it could have just as easily been an image or something more exciting. Also snapping is in action, with the steps set to 6. We're snapping to steps for the sake of the demonstration, but using steps without snapping is even cooler; you'll see that in the next examples.
new Dragdealer('magnifier',
{
steps: 6,
snap: true,
animationCallback: function(x, y)
{
text.style.fontSize = String(12 + x * 24) + 'px';
}
});
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut lorem diam, at tincidunt libero. Integer sodales nulla a turpis pulvinar vel aliquet sem laoreet.
This example is a bit more complex implementation. On the left there is the actual Dragdealer element, which is populated with four photos that you can drag horizontally. They are clipped by the component wrapper, which in this case is actually smaller than the handle content itself, exactly as wide as each of the contained photos, which results in a carousel effect.
On the right there are four links that control the component, and practically link to a corresponding image.
And to top it, I've also added a cursor to the controls on the right, which is positionated through the animation callback, offering feedback on both ways.
#slideshow {
overflow: hidden;
...
var slideshow = new Dragdealer('slideshow',
{
steps: 4,
loose: true,
animationCallback: function(x, y)
{
var top = x * (menuWrapper.offsetHeight - cursor.offsetHeight);
cursor.style.top = String(top) + 'px';
}
});
link1.onclick = function()
{
slideshow.setStep(1);
return false;
}
link2.onclick = function()
{
slideshow.setStep(2);
return false;
}
link3.onclick = function()
{
slideshow.setStep(3);
return false;
}
link4.onclick = function()
{
slideshow.setStep(4);
return false;
}
Again, this is not a slideshow carousel per se, it's just an idea of what you could build using Dragdealer. For example you could easily add an auto-rotate functionality to this with 5 lines of code tops, but these are not solutions, just examples.
Another advanced example, similar to the previous one, but on both dimensions. Another thing to notice in both this and the previous demo is the loose property. Check out the elastic ease applied when trying to drag outside the boundries.
#canvas-mask {
overflow: hidden;
...
new Dragdealer('canvas-mask', { vertical: true, steps: 2, loose: true });
You could also have control links: Slide 1 | Slide 2 | Slide 3 | Slide 4.
Thank you for you interest in coolness and I hope you have as much fun as possible!
© 2010 code.ovidiu.ch. No idiot-proof guarantee.