ovidiuch / dragdealer

Drag-based vanilla JS component

Dragdealer.js

Drag-based JavaScript component, embracing endless UI solutions

Specs & (sweet) demos: http://skidding.github.io/dragdealer

Install

The basic way to install Dragdealer is to include the minified script into your web page.

You can check the examples to see how you can add a particular slider from the demo to your own project.

Node package

It can also be installed through npm, using something like browserify.

var Dragdealer = require('dragdealer').Dragdealer;

Running tests

Dragdealer has CI set up through Travis CI and Sauce Labs (who both offer their outstanding services for free to open-source projects.) Any pull-request will be tested automatically after each commit.

You can also run the tests by hand, of course.

Fire up the browser

Just load index.html in a browser of choice and pull the top slider to the right or access URL with the /#runner hashtag directly. Example: http://skidding.github.io/dragdealer/#runner

You can start a web server using the ./node_modules/.bin/grunt dev task, which will make the project available at localhost:9999

Sauce Labs and PhantomJS

Run the ./node_modules/.bin/grunt test grunt task to run the tests from the terminal.

If you have SauceLabs credentials (SAUCE_USERNAME and SAUCE_ACCESS_KEY), tests will run there, otherwise the task will fall back to PhantomJS. You can also force grunt to run the tests one way or the other using the test-phantomjs and test-saucelabs tasks.

Minifying

node_modules/.bin/uglifyjs src/dragdealer.js -o src/dragdealer.min.js

Make sure you ran npm install in the project directory first. Also, you can use global paths if you have the npm modules installed globally (-g), but you shouldn't need to.

Contributing

There's no contributing guide so far, but you're more than welcome to start a discussion.

dragdealer's Issues

How does one go about contacting the author so that we may use dragdealer within our Eclipse web application?

We are attempting to use dragdealer within our Eclipse project. As with all third party content, Eclipse wishes to contact the author in order to establish provenance. Eclipse states that they have no response after multiple requests (not sure what their contact method is as I am not part of the CQ process). However, if the author could respond with the email address they are currently using I could provide that forward to Eclipse legal in the hope that this furthers their process. https://www.eclipse.org/

Input inside carousel

I have a tabs navigation with dragdealer, each page is a carousel item. The issue is when I use inside tabs, I can't select it. Click on inputs does nothing. You can reproduce that in any demo, by adding some input inside it. Is there some way to have inputs inside dragdealer elements?

Differences between npm & github versions

Seems like both are 0.9.8 but npm's version doesn't have the dragStartCallback thing.
Are they out of sync?

Pause and End of Animation Listeners

Is there a way to have a listener listen for when the user lets go of the handle and the animation ends on one of the steps?

Is there a listener for when the user is dragging the handle and pauses whiles still holding down the handle?

Add option to control friction when slide=true

I'm using DradDealer for a gallery similar to the cars demo. However, I've noted that swiping is too slow, because the range for sliding is low.

I've found in the source code the following commands:
target[0] += ratioChange[0] * 4;
target[1] += ratioChange[1] * 4;

The number 4 is the value I'm looking for, and changing its value to something bigger gives me the effect I want.

It would be nice that instead of editing the source code, it was provided as a customizable option.

Use requestAnimationFrame instead of setInterval for animation loop

requestAnimationFrame is faster in modern browsers, old browsers may use this shim.

Revert to original position on release

Hi!

I have a handle centered with x and y 0.5 i would like them to be centered again on mouseup. Is there a way to do this?

regards Joel

Allow to pass handle as direct element

Dragdealer forces to use only div.handle as handle element. I'm fine with this as default, but an option to pass handle element directly would make it more flexible.

Just imagine this component being used on door accessories website, and they need 'handle' classname for something obvious :)

P.S. If you think this is not important, feel free to close.

Position

I've used dragdealer here:
http://goo.gl/ZrG360
Is there's anyway to keep the default location at 50% on page load?

Bower ignore issues

bower.json contains these at the moment

  "ignore": [
    "demo/*",
    "lib/*",
    "index.html",
    "sauce_connect.log*"
  ]

demo and lib folders are included in the bower package, but they are empty.
Also I'm not sure if spec folder, dot files (.gitignore, .npmignore, .travis.yml), Gruntfile.js or package.json are needed in the distribution package.

Standalone basic example

Is it possible to put an individual example on a page? Does dragdealer need all these dependencies (besides jquery)?

lib/jasmine.js
lib/jasmine-jsreporter.js
lib/jasmine-html.js
lib/jasmine-jquery.js

spec/helpers.js
spec/matchers.js
spec/optionsSpec.js
spec/draggingSpec.js

spec/touchDraggingSpec.js

spec/callbacksSpec.js
spec/apiSpec.js
spec/resizingSpec.js
spec/eventsSpec.js
spec/setup.js
spec/browser-runner.js

js memory usage

Please check the JS memory usage:

• Open your demo page (or any other page using dragdealer.js)
• Open chrome dev tools -> timeline
• Record the JS usage
• Don't use the page... just wait
• Stop recording
• Watch GC fighting to collect 8-10mb every 5 seconds...

NaN returned in callback for x and y parameters (horiz and vertical dragging enabled)

Hi there,

First up, cool stuff.
I'm using the control in the following manner: I have a div, block display, about 200 by 200px, to make a box. Within this I have a handle of dimensions 20 by 20px. The user drags the handle div around inside the container. If the user clicks anywhere inside the container (but not on the handle) I expect the handle to slide to the position, much like what happens with a horizontal or vertical slider. Instead, there is no animation and in the callback function of my options, the x and y parameters supplied are NaN. Thoughts?

Avoid unnecessary global variables

Dragdealer creates 3 global variables (Dragdealer, Cursor, Position). While it would be better to expose only one global that is accessed from the outside of the module.

This can be easily fixed by wrapping module contents in self-executing anonymous function. Another option to consider is to use UMD pattern.

Vertical navigation

Hello!
I'm trying to create a vertical navigation menu with prev \ next buttons.

$('#next').click(function() {
slider.setStep(slider.getStep()[0] + 1);
return false;
});
$('#prev').click(function() {
slider.setStep(slider.getStep()[0] - 1);
return false;
});

Horizontal version works fine, but the vertical

$('#next').click(function() {
slider.setStep(slider.getStep()[1] + 1);
return false;
});
$('#prev').click(function() {
slider.setStep(slider.getStep()[1] - 1);
return false;
});

is not working at all.

How can I specify the position in that case

slider.setStep(slider.getStep()[0] + 1);
or
slider.setStep(slider.getStep()[1] + 1);

for y only?

Thank's!

this.handle.offsetWidth is zero sometimes and this causes problems

I have a scenario where the handle is an image. Sometimes it takes a while to load that image and those times the handle is calculated outside of the container element.

For me, the fix was to set the handle image a width in css.

I'm not sure what the best approach for this would be, maybe mention this css width workaround in the docs?

One possible solution could be to check if the handle has an image in it, wait for it to load until calculating? But then again that would be a problem if the image is a css background for example.

Do you guys have any ideas for this?

Granular custom events / callbacks

I was attempting to integrate this component into an AngularJS directive.

Unfortunately, I found I needed more information than just x and y on snap or animation.

I needed to know when the dragging started and finished (or when the mouse was down/up). Since the events don't propagate, I can't listen to the container.

It would help to have CustomEvents (https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) or separate callbacks to key into when those happen.

Dragdealer infinite image carousel

Sir

Dragdealer is am amazing plugin, but still it misses something..If you can add infinite image carousel it will be a good thing. Can you give an example to change it as infinite image carousel

Thanks in advance

Bower missing minified version

My last issue concerning bower, for now :P

Please add minified versions of dragdealer.js and dragdealer.css to distribution package.

looping the image when I drag last image

Hi.. I want to make a slider like 360degree, I made a simple drag slider using 1st example it works fine, But my requirement is when I drag a last image it ends there. I dont want it to be ended there, instead of that I want to drag the 1st image like loop.

Please can you help me.. I am so struggle with this issue.

Thanks & Regards
Dina

getStep() returns NaN when only one step is present

We are using Dragdealer for a widget that's dynamically filled with content, so it can happen that it ends up with only one step.

In this case, getStep() returns [NaN,NaN]. This might be an edge-case but I'd expect [1,1] here.

Example:
http://jsbin.com/wiwexojiqu/2/edit?html,js,output

Clickpoint calculation

if i use dragdealer on pages in a content slider, like "royalslider", the calculation of the clickpoint relative to the bar failed.
The bar handler moves to the wrong direction or stand stil, if i click on the right or left side of the bar.
The following simple code fix it for my page:

startTap: function() {
if (this.disabled) {
console.log("disabled?");
return;
}
this.tapping = true;
var a = [
Cursor.x - $(this.wrapper).offset().left ,
Cursor.y - $(this.wrapper).offset().top
];
this.setTargetValueByOffset(a);
}

I'm not sure if this function works in all cases, but it works in my case.
(Testest: IE 11, FireFox 28, Chrome 34, iPad, Nexus 7)

Hope it helps.

Unexpected behavior with standard Macbook trackpad

When tapping (not clicking) on the drag dealer wrapper when using the macbook trackpad, the handle position isn't always affected. You can observe this behavior on the demo on the documentation page. http://skidding.github.io/dragdealer/

It appears that when the tapping ends and this.setTargetValue(this.value.current) is being run, this.value.current hasn't been updated with the correct value.

dragStartCallback / dragStopCallback not working?

Hi,

I'm not sure if I missed something but looks like those events aren't working.

This is my code:

    drag = new Dragdealer('drag_'+container_id, {
      animationCallback: function(x, y) {
        // doing some cool stuff here
      },
      dragStartCallback: function(x, y) {
        console.log('drag start');
      },
      dragStopCallback: function(x, y) {
        console.log('drag stop');
      },
      steps: 2,
      speed: 0.50
    });

Add to bower

bower install dragdealer currently links to this: https://github.com/yahyaKacem/dragdealer, which is out of date.

Add dragdealer to bower

There has been a pull request on the matter here #27 and #30 but dragdealer as of now can't be found from bower.

$  bower install dragdealer
bower                        ENOTFOUND Package dragdealer not found

Nested Dragdealers

I've got two dragdealers, one nested inside the other. The issue I'm having is that the parent dragdealer (restricted to vertical only) works fine, while the child (horizontal only) bugs out.

Is there a way to fix this or work around it, or is Dragdealer inception impossible?

How to disable listening for mouse events

Hi,

using 0.9.5 I could disable listening for mouse events be removing this line.

Is there a way to do the same using 0.9.6+? Preferable without source code modification.

-- ooxi

filtering out spurious mouseMove preventing mouseClick in Chrome

There is a problem with the current version of Chrome:
It very often emits mouseMouve event after the mouseDown event and before the mouseUp but with no user mouse movement (big killing bug!).
In this case, this should restore the click functionality, while being transparent for browser with no e.movementX support.

  onDocumentMouseMove: function(e) {
    Cursor.refresh(e);
    if (this.dragging) {
      if( !this.activity && e.movementX === 0 && e.movementY === 0 ) return;
      this.activity = true;
    }
  },

too much recursion

var dragme = new Dragdealer('dragdealer', {
        requestAnimationFrame: true,
        horizontal: true,
        vertical: true,
        speed: 0.22,
        loose: false,
        slide: true,
        snap: false,
        //steps: 3,
        left: 0,
        right:0,
        top:0,
        bottom:0,
        x: 0,
        y:0,
        callback: function(x, y) {
            this.setValue(0.5, 0.5);
        }
    });

Changing "damping rate" of slider handle

Hi,
Wondering if it is possible to change how quickly the handle moves towards a mouse click/hold -- right now, if the user clicks and holds very close to the handle, the handle moves towards the mouse very slowly. If the user clicks far away from the handle, the handle quickly jumps towards the mouse. Is there a way to make the handle move faster in the former case?

Half-pixel Precision on 2 dppx Resolution Displays

In the case where the handle is an image carousel (such as the example on the dragdealer web page), and you drag the carousel horizontally, it will animate (slide) to a particular position defined by the number of steps. With CSS3, this animation is achieved using something like -webkit-transform: translateX(). Is the value of translateX() always set as an integer? Can it be set with a precision of 0.5 px?

I think in some cases it should have a precision of 0.5 px, not 1 px. I'll give you an example. On a device that has a display dppx of 2, there are 2 display pixels per CSS pixel. Web browsers on such devices (e.g. Safari/WebKit) actually render elements with precision of 1 display pixel – or 0.5 CSS pixels. This happens a lot when using proportional widths (%) and scaled elements, which are extremely common with responsive web development.

In the situation above, if you have an image carousel containing image slides that have a non-integer width such as 122.5 px, you would want the drag transform to step at increments of 122.5 px. This is because WebKit actually renders the image as 122.5 px wide (245 display pixels) and you would want it to line up correctly with the left and right edges of the container view. At present, the transform is only set to the nearest integer; 122 or 123 px. The result is that the edges of the image are offset from the container view by 0.5 CSS pixels, or 1 display pixel. This shows up as a thin vertical line along one edge, and depending on the contrast of the background and the image this can be very noticeable. I've found that in the Safari Web Inspector, if you manually override the transform value with 122.5 px, it then aligns perfectly in this situation.

You may need to exclude 0.5 px precision on 1 dppx displays, but if necessary you could check for this using window.devicePixelRatio. Likewise, using arbitrary float values might lead to blurring. Besides 2 dppx displays, I don't know what happens on 1.5, 2.5, or 3 dppx displays. Perhaps 3 dppx would benefit from precision of thirds? Further investigation would be needed there.

I personally don't have the JavaScript expertise to make this change myself, but could you please consider this?

Thank you.

Android Support

Hey,

is it normal, that the script doesn't work on android devices?
Example: mi.codelabr.de

Thanks

Edit: Sorry, solved..

Release a new version

The latest version is from April. Can you release a new version? I'm interested in getting the css3 feature.

Adding steps to a dragdealer instance

Is it possible to add steps to an instantiated Dragdealer instance? Use case: adding images to the image carousel dynamically.

Use css3 translate if available instead of absolute positioning

Moving elements with css3 translate is faster than using css absolute positioning, details here.

eventListener missing argument for Firefox v6 and earlier

In our internal testing, the library crashed in FF v3.6. A little web searching turned up this info:

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.removeEventListener

Relevant lines are 695, 697, 703 and 705 of Dragdealer version 0.9.7. Early testing shows that adding a "false" argument to the end of the listeners resolves the bug.

...
var addEventListener = function(element, type, callback) {
if (element.addEventListener) {
element.addEventListener(type, callback, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, callback, false);
}
};
var removeEventListener = function(element, type, callback) {
if (element.removeEventListener) {
element.removeEventListener(type, callback, false);
} else if (element.detachEvent) {
element.detachEvent('on' + type, callback, false);
}
};
...

new version tag for better Bower compatibility?

I see you've added a bower.js file for bower support, but unfortunately, none of your tagged versions include that file so I'm having trouble getting that to work. Any way you could tag a new version for better compatibility?

enable vertical and horizontal swipe [question]

Hi Ovidiu,

Dragdealer is amazing. Thank you for your work and all the intuitive demos.

I have a question. Since I am new to javascript, it might be a stupid one.
I am trying to use Dragdealer to create a simple game, where the user can swipe up, down, right and left to modify the background image shown in a wrapper. So is it possible to achieve this effect by extending the carousel demo? Can you give me a hint? Thank you very much.

with regards,
Chris

Method to set the Dragdealer to initial state

I need to set new Dragdealer options on window resize. Is there a method to set everything back to initial state?

How to set a min/max return value?

I know, not a great place to ask a question but, how do I go about setting a min/max return value on animation callback?
E.G. at far left the value is 22, far right 138, and everything in-between
This is probably some simple math but just cant get my head into it.
Thanks for any assistance.

Resizing window causes the handle to lose position

My dragdealer is set to 50% position initially. When I suddenly resize the window (for example on an iPad, I move from portrait to landscape) the handle is no longer in the center of the screen. I tried calling the reflow method on a window resize, but that does not seem to help.

`{ x: 0.5, y: 0.5 }` doesn't center correctly in Safari

Hi,

It seems that the following does not center a draggable image in Safari (8.0.4, OS X Yosemite), while it does in Chrome, Firefox and Opera:

var modalDD = new Dragdealer($modal.find('.image-embed')[0], {
    x: 0.5,
    y: 0.5,
    vertical: true,
    loose: true,
    speed: 0.3,
    requestAnimationFrame: true
});

My HTML looks like this:

<div class="modal" data-type="image">
    <button class="close-btn modal__close-button"><svg role="img" title="Close"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cross"></use></svg></button>
    <div class="image-embed dragdealer">
        <div class="image-embed__drag-label">Drag image to move</div>
        <img class="handle" src="http://localhost:8888/adagio/nominum/wp-content/uploads/2015/04/n2-targeting-screenshot-1024x659.jpg">
    </div>
</div>

Chrome gives the following inline styling:

style="perspective: 1000px; backface-visibility: hidden; transform: translateX(120px) translateY(152px);"

While Safari outputs this:

style="-webkit-perspective: 1000px; -webkit-backface-visibility: hidden; -webkit-transform: translateX(850px) translateY(477px);"

I'll try to find out where this bug occurs and if I do, I'll send you a PR.

jsdelivr or cdnjs?

Reset and loop

Hello,

I want to reset my dragdealer image slider by scroll down. When I scroll down - I want to reset slider to first slide. I have multiple sliders and I want to reset them when scroll to next slider, so when I scroll back to that slider - I arrive at first slide instead of last slide where I've been.

Also, is it possible to go to first slide again after reaching the last slide?

Thank you.

About Prev/Next navigation for dragdealer

Hi! I have a problem.

$('#next').click(function() {
slideshow.setStep(( slideshow.getClosestSteps( slideshow.value.current)[0] * ( slideshow.steps - 1)) + 2);
return false;
});
$('#prev').click(function() {
slideshow.setStep(( slideshow.getClosestSteps( slideshow.value.current)[0] * ( slideshow.steps - 1)));
return false;
});

This code works In the old version dragdealer (0.9.5), but it does not work in the latest version of the plugin (0.9.7).
What is wrong?
Thanks!

Cleaning the instance

Hey there!
I noticed the API doesn't explain how to properly clean the Dragdealer instance, for instance on a SPA you might want to be sure that no listener/rAF loop/... is still running,

I'm currently doing the following:

this.slider.disable();
this.slider.unbindEventListeners();

But I'm not sure if it's enough?

Change slide dragging less than half page

Hi guys, i noticed that creating a slideshow with dragdealer, like in this demo:

http://tympanus.net/Development/DraggableDualViewSlideshow/

For passing from one slide to another, the script needs the user to drag at least 51% of the .current slide. Is there any way to decrease that value or make the "drag-change slide" more sensible?
Like, i drag and scroll only 100px of my handle and i pass to the other slide?

jquery

can you make this in jquery?

Tests no longer pass on SauceLabs

The Travis build is failing: https://travis-ci.org/skidding/dragdealer/builds/43202380

Something must've changed that requires a different configuration or Jasmine reporter.

In the meantime, tests pass locally or in the demo page.