Input inside carousel

[4ega]

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?

[ovidiuch]

Is there some way to have inputs inside dragdealer elements?

I've never tested for this, since draggable surfaces are usually less interactive. Clicking on links works, so theoretically clicking the input should also work if you click still (don't drag from mousedown to mouseup). This is the relevant code: https://github.com/skidding/dragdealer/blob/master/src/dragdealer.js#L458-L467

You could maybe add the form on top of the handle and position it in tandem with the Dragdealer handle using animationCallback. See the "Content scroller" demo for inspiration, where you synk the scrollable area with the slider on the right: http://skidding.github.io/dragdealer/#just-a-slider – You could use the same concept but put your form with inputs on top of the draggable carousel.

[florianbepunkt]

Hi,

I have the same problem. Input fields within the slides do not work. I tried to disable the event handlers you mentioned in the JS file, but it doesn't seem related.

When I use a text input field with a label inside the carousel you can't select the input with a click. But when you click on the label the input gets focused/selected.

Any help in solving this would be appreciated.

Thanks, Florian

[4ega]

Hi, I have done this in really nasty way here

Works for me at least )

[florianbepunkt]

Thanks I tried your commit but it didn't work. What really confuses me is that the input gets selected when I click on the label

[ovidiuch]

I think a cool Dragdealer feature for this would be to a dragdealer-skip class for elements inside the .handle that you want to preserve native events and not be draggable. This way you could wrap all your interactive content (forms, links, etc) under .dragdealer-skip and dragdealer would pass through and ignore events that are received for a child node of .dragdealer-skip.

Never had time to implement this. If someone thinks this is a good idea and is willing to contribute I'm willing to validate an implementation proposal and then code review code added.

[mariusjp]

Has anyone by any chance taken a look at this? I did try to figure out how you set up your plugin but I'm not familiar with your structure (I have edited/created a few plugins myself but they were all structured differently)

[VagnerDomingues]

i did a very complex slider witch in my opinion dragdealer wasn't suposed to work that way, but it did!! and for my surprise it worked greatly with your implementation @4ega , it was really helpfull i was selecting the inputs with jquery .focus(); whenever there was an input inside the handler, that was really nasty.. i think your implementation should be implemented with a global var named "handleInputs" in the dragdealer's main branch

[mariusjp]

This is how I got mine working: Commit on fork

[asdf23]

This problem is cause by the hooks not being set/released correctly. Also the animation frame never stops.

[ovidiuch]

@MJTheOne that's cool. If you feel like contributing upstream I'll try to find time code review your patch. Others here might as well.

@asdf23 how so? I think it has more to do with knowing what's a drag target and what not.

[dandxc]

@skidding Did you ever get a chance to fix this? It still appears to be an issue.