-
Dragdealer JS
The extra mile
A few weeks ago I posted a JavaScript Slider component, the same I used for my comment button. One problem was that it lacked touch support and therefore was unusable on mobile phones. But the surprise came when a friendly chap named Pratik implemented it without even me knowing, then contacted me to share his contribution. I then saw the potential and decided to take it to the next step.
Obviously, I had to come up with a less vanilla name than Slider, but I wanted it to be something smart. The ongoing name brainstorming spanned over a few days, but after a bunch of uninspired combinations, it finally hit me. Presenting: Dragdealer JS, drag provider – the good stuff.
I chose Google Code for hosting. This is the project page: code.google.com/p/dragdealer/, where you can find the repository and the files to download, but I also have an internal project page with more in-depth details and demos: code.ovidiu.ch/dragdealer/.
So what does it do?
A LOT. Really. While the base code is mainly the same, It's extended to another dimension... literally, it's 2d now. Basically it gets dragged, tapped, even somehow stretched; then it slides, snaps, responds and reacts (I'm talking about the callbacks and the runtime methods). And of course, it has the touch support that Pratik originally added.
If you have a touch device at hand try the comment slider below, which is now a Dragdealer implementation, and let me know what device/browser did you manage to post from.
Yeah baby, I'm bringing the JavaScript back!
Hi, sometime happen to match this error in firebug console: tipElement.ownerDocument is null [Break on this error] Filtered chrome url chrome://browser/content/browser.js Someone could help me ? thanks in advance
reply
Posted August 9th, 2010, at 3:28pm, by gex.rossi.
Are you available for contract work? I have a project that I need help with and I love your stuff. Please let me know. Thanks.
reply
Posted August 7th, 2010, at 5:10pm, by Michelle.
It works great, but is there a reason that you never stop the setInterval() call and even when nothing is dragged your animate() function is being called every 25 milliseconds, which is A LOT. I am making some web-apps using this slider and the pages all use AJAX so will not be refreshed often, and I think all those unnecessary calls can significantly affect the performance, especially when used on mobile device browsers. G.
reply
Posted July 19th, 2010, at 5:34pm, by Georgi.
I think initializing the interval every time a user interacts or a method is being called is an even bigger effort. Having AJAX calls changes everything, but the condition should be placed in your callback.
reply
Posted July 19th, 2010, at 7:24pm, by Ovidiu Cherecheș.
This is seriously amazing. Your super flexible, super simple API enables me to do exactly what I want with very little effort. Great job, and thanks a lot!
reply
Posted July 15th, 2010, at 1:03am, by Bojan.
Hi, thanks for this script! Got it working in iPad using uiwebview. Encountered 1 issue though, if I have an element inside let's say a link inside <div class="handle">, there's no way I can click/tap on that link. Already tried disable() method, but I still can't get it to work. Any ideas? Thanks again!
reply
Posted July 8th, 2010, at 2:11pm, by Jan.
verry good Jquarry i have ever seen Сафари Ҳилларӣ Клинтон ба Қафқоз
reply
Posted July 5th, 2010, at 7:50am, by ismonov.
I can't click slide inside handle (Map by jquery) $("#slideshow .handle .slice").click(function(){ alert('click'); }); It's work find in PC browser but not work in iPad :p
reply
Posted July 3rd, 2010, at 1:46pm, by chutawat.
That's because you don't click on iPad, you touch. There are separate events for click and touch. I don't know if jQuery has both implemented though.
reply
Posted July 3rd, 2010, at 2:20pm, by Ovidiu Cherecheș.
Thank you !. i found that event. I use $("#slideshow .handle .slice").bind('touchend',function(){ alert('click'); }); :D
reply
Posted July 5th, 2010, at 7:56am, by chutawat.
Сan i cancel the animation on dragdiler. (That is, the faster the move the mouse farther will move the slider.)
reply
Posted June 27th, 2010, at 10:55pm, by Ilya.
If you're referring to the sliding (upon mouse release) than yes, it's the option parameter called "slide" and can be set to false.
reply
Posted June 28th, 2010, at 7:46pm, by Ovidiu Cherecheș.
neat sliders :D i love how you put it.
reply
Posted June 24th, 2010, at 12:26am, by carl.
Great work. I am using this in a production environment now and have a jquery API for it. One constructive comment: When you want to use both steps (via scroll arrows) AND dragging in the same interface, the 'dealer' should recognize what step you are nearest to so when you decide to shift from dragging to using scroll arrows it does not think you are still closest to your last set step. This can be confusing to the user.
reply
Posted June 23rd, 2010, at 2:30pm, by Ben.
I'm sorry, I don't really understand the scenario you are talking about. You can send me an email if you have a live example of that behavior or to show me the jQuery API you were talking about. You can find my contact details at http://ovidiu.ch. Thanks!
reply
Posted June 23rd, 2010, at 4:50pm, by Ovidiu Cherecheș.
It's a cool script and I love the way you've used it for your "Post comment" button, but alas it doesn't work at all on my Symbian S60v5 phone... I've logged the details as an issue here: http://code.google.com/p/dragdealer/issues/detail?id=2
reply
Posted June 23rd, 2010, at 11:58am, by Marcus Tucker.
Your phone/browser might not dispatch mouse nor touch events, but we'll have to test. Thanks for opening that issue ticket! I'll look more into it and find some way to identify the nature of the problem and continue the discussion there.
reply
Posted June 23rd, 2010, at 4:41pm, by Ovidiu Cherecheș.
Very Nice!
reply
Posted June 23rd, 2010, at 7:37am, by James Stansell.
When used within a div that is hidden by style="display:none" and then toggled to display:block to show, the red scroll doesn't work...any ideas?
reply
Posted June 23rd, 2010, at 12:29am, by opacity.
When the script inits, it does some calculations based on html elements' sizes. When their display is set to none, those values are null. You could use visibility:hidden instead of display:none but that might not be suited for your case. A viable solution is to (re)init the script just after you displayed it to block.
reply
Posted June 23rd, 2010, at 4:35pm, by Ovidiu Cherecheș.
Great stuff, I'm trying to implement the Slideshow w/ controls on my site. But I cannot get it to work. I even tried saving the entire demo page and then progressively chopping away the unneccesary code. It won't display the actual pictures (changed all the urls in all files, css and all), only the controls. When I take away the demos above, even this halts. Can you put up a simple demo of this application, with the neccessary javascript in the header? That way it would be clear what is needed. Also, I'm wondering if this could be accomplished by referencing the images in the html instead of the css, (probably with a style attribute). This makes it much easier to implement into a wordpress theme, plugin or other dynamic backends for easy content update. Good, sturdy and innovative work!
reply
Posted June 21st, 2010, at 10:01pm, by lastafa.
Thanks for your appreciation. OK, I think a demo page in the release archive would've been useful so you didn't need to go trough the webpage source. I'll consider this for the new release. I also sent you a private email requesting more details on the particular case so I can help you work it out.
reply
Posted June 23rd, 2010, at 5:25pm, by Ovidiu Cherecheș.
you are a superstar, thanks for sharing. just curious, how iE handles this plugin? IE 7 works well?
reply
Posted June 21st, 2010, at 3:24pm, by pol moneys.
IE6, IE7, IE8, you name it. :)
reply
Posted June 21st, 2010, at 4:45pm, by Ovidiu Cherecheș.
love the slider component
reply
Posted June 19th, 2010, at 9:41pm, by Riyadh.
Great job... Works great on an iPad.
reply
Posted June 18th, 2010, at 9:22pm, by Amir.
Greaaaaaaaaat!
reply
Posted June 17th, 2010, at 10:27pm, by Neurus.
Cann you give us a hint, how to integrate it in WordPress as Comment Slider. Like here. Thank you!
reply
Posted June 17th, 2010, at 4:33pm, by Timmy.
Well as far as front-end goes, I see no problems. But you're probably looking for a compact plugin thingie to bind with the back-end, which I currently don't have. Maybe someone with WP experience is willing create it, in case I don't find the time.
reply
Posted June 18th, 2010, at 3:57am, by Ovidiu Cherecheș.
Great Job! WOW : )
reply
Posted June 17th, 2010, at 3:31am, by Wayne .
fantastic. But I have newbie question. How does drag-dealer know which DOM element to affect? As I read the code examples, I don't see a connection -- such as a named element ID. Any feedback would be appreciated as I'm clearly missing something.
reply
Posted June 16th, 2010, at 11:43am, by rick.
The first parameter that the Dragdealer takes is the element ID. Read the description for "wrapper" under JS API.
reply
Posted June 16th, 2010, at 2:27pm, by Ovidiu Cherecheș.
This is some good stuff, I need to learn some javascript but the tutorials I have been doing are really boring and pointless, like alerts and write.document and log.console, I want to do stuff like this ! thanks for keeping me interested in javascript :) Cheers
reply
Posted June 16th, 2010, at 2:00am, by pixelBender67.
Look good but is it possible to have 2 handlers in the same range? And if so, is it also possible that they cannot pass each other? So they block each other and you cannot drag on over the other? Hope this explanation makes any sense :) And how to do this? Kind regards,
reply
Posted June 15th, 2010, at 11:16pm, by Maurice.
I understand what you mean. I was even thinking about the exact same thing a few days ago, since it's a common drag and drop scenario. However, it's not supported at the moment. I am thinking about implementing this somehow, but I'm also trying not to over complicate the script. I'll let you know.
reply
Posted June 16th, 2010, at 2:43pm, by Ovidiu Cherecheș.
Good job, easy to use :)
reply
Posted June 15th, 2010, at 1:46am, by Manmohanjit Singh.
Finally! A *simple* slider control!
reply
Posted June 13th, 2010, at 6:34pm, by Dave.
Works as expected on an Android phone
reply
Posted June 11th, 2010, at 5:14am, by Twidi.
Yeah! Great piece of JavaScript *library agnostic* Such a shame you don't have an RSS feed on your blog ;)
reply
Posted June 11th, 2010, at 1:19am, by Kemar.
Works on both my Android 1.6 and 2.1 phones. Also tested with Skyfire and it works. Sweeta!!!
reply
Posted June 1st, 2010, at 5:32pm, by Ciprian.