Tuesday, June 22nd, 2010

Drag and drop is a gateway drug with DragDealer

Category: Component, JavaScript

DragDealer is a fine new JavaScript component that abstracts both touch and point interfaces.

It makes life easy to do sliders and the like:

  1. <div id="my-slider" class="dragdealer">
  2.     <div class="red-bar handle">drag me</div>
  3. </div>
  4. <script>
  5. new Dragdealer('simple-slider');
  6. </script>

But, it can do so much more. Most of the power comes from tying functions into the drag movements. A good example here is the font size widget that they show:


  1. new Dragdealer('magnifier', {
  2.     steps: 6,
  3.     snap: true,
  4.     animationCallback: function(x, y) {
  5.         text.style.fontSize = String(12 + x * 24) + 'px';
  6.     }
  7. });

Continuing on from here, you can see rich examples such as this component that looks like a rich carousel-esque widget from the front of a news paper:

Posted by Dion Almaer at 6:12 am

3.5 rating from 4 votes


Comments feed TrackBack URI

Very cool!

Comment by sixtyseconds — June 22, 2010

I like the canvas mask option, awesome.
Are those things with screws meant to be aliens from Star Wars?

Comment by Skilldrick — June 22, 2010

This is an example of a cool trick that will, as a result of both the library and its implementation, exclude disabled users.

* All elements should have a visible keyboard focus: This is easy, since it just means adding equivalent pseudoclasses or javascript events

* All elements should be equally usable, or all content equally available, without a mouse

* It’s much harder to test, but all content should be equally available without a monitor. For example, if it really were scrolling a box with hidden overflow, that content is still available to a screen reader. But if it were dynamically loading text, there would need to be an easily understandable way to return focus to the updated content.

Comment by mucsd — June 22, 2010

I think its a crimping tool for RJ45 and RJ11 plugs ( network / telephone ) such as this one http://www.intertexelectronics.com/images/300-088.jpg

Comment by rburgt — June 22, 2010

Hi there!!!  
I am using this amazing dragdealer code for a website. 
Great code! I I was delighted when i found your plugin. My annoying boss wanted that ipad scroll so bad. 
It would be perfection if i could get it to work on ie8.
I have reached out to the developer to see if he can help.
Here is the link: http://www.davidhowell.net/dev/
On IE8  it is catching a error in the dragdealer script, it stops any javascript to run. Then it shows a black screen.
Am really sad and will have to remove it as client is freaking out.  i asked…Who is the hell used IE8??????? Crazy people! 
I hate hate hate have have Explorers of all kinds and shapes. phewwwww

Can anyone else test it for me on IE8? Maybe you have an idea on what’s happening?

IIt’s a wordpress site by the way.

THANK YOU SO MUCH for any help :-)


Comment by visualale — February 10, 2012

Leave a comment

You must be logged in to post a comment.