ovidiuch / dragdealer Goto Github PK
View Code? Open in Web Editor NEWDrag-based vanilla JS component
Home Page: http://ovidiuch.github.io/dragdealer
License: MIT License
Drag-based vanilla JS component
Home Page: http://ovidiuch.github.io/dragdealer
License: MIT License
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?
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?
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?
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.
Is it possible to add steps to an instantiated Dragdealer instance? Use case: adding images to the image carousel dynamically.
bower install dragdealer
currently links to this: https://github.com/yahyaKacem/dragdealer, which is out of date.
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);
}
};
...
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?
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.
requestAnimationFrame
is faster in modern browsers, old browsers may use this shim.
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.
can you make this in jquery?
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?
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
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?
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;
}
},
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?
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.
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.
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
});
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.
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.
Moving elements with css3 translate is faster than using css absolute positioning, details here.
I've used dragdealer here:
http://goo.gl/ZrG360
Is there's anyway to keep the default location at 50% on page load?
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!
Seems like both are 0.9.8
but npm's version doesn't have the dragStartCallback
thing.
Are they out of sync?
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!
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
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?
My last issue concerning bower, for now :P
Please add minified versions of dragdealer.js
and dragdealer.css
to distribution package.
I need to set new Dragdealer options on window resize. Is there a method to set everything back to initial state?
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/
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
Hey,
is it normal, that the script doesn't work on android devices?
Example: mi.codelabr.de
Thanks
Edit: Sorry, solved..
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.
The latest version is from April. Can you release a new version? I'm interested in getting the css3
feature.
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.
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.
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.
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.
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
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.
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?
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.
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);
}
});
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.