I am building a RN app. I have a page that displays some times in the week. The user clicks all the times they are free in. (Look at photo for visual representation)
Instead of having the user individually click on all the squares, how can you create a functionality where they can click on many squares at once by dragging their finger from the start square to the end one. Almost like how a mouse on a computer would work
Basically the question really is, if I drag my finger on the screen, how can i trigger all buttons I drag my finger across
This is not my project but the time slots kind of look like this
I don’t know if it’s possible… Some apps like Airbnb, Booking… don’t implement a drag action but the date range. The user selects a start and end dates to have multiple selections.
But maybe you could look at this library React Native Gesture Handler. It allow to simplify the gesture handler.
You should use Pan gesture to handle the drag behavior.
Related
Recently I got an edited version of the JavaScript "Reel" by Pisi, which allows the user to use the mouse wheel to zoom in on a picture. The "reel" itself is working as a 360 view of an object, using many images which will jump to the next image in order when using mouse drag.
However, since I will use this application on a touch screen without a mouse I was thinking about rebinding the mouse wheel or adding events to a button which works like the mouse wheel. For example, below the DIV with the 360-slider I want two buttons, one that zooms in and one that zooms out. Any idea on how to make this work?
Any help is much appreciated!
On a web app that I am working on, one of my elements is pretty large (a table), and thus, reaches near the edges of the iphone's screen.
When a user touchmoves on the element, the user can select various things that appear within the table. When the user's finger is in the table, I prevent all default touch actions. However, I do not prevent default touch actions universally on the page because I want the user to still be able to scroll and zoom normally when outside the element.
The problem I am facing is that if the User moves just a little bit outside the element while engaged in a touchmove, the user often ends up swiping back.
Like I said, I do not want to prevent default universally because scroll and zoom are important to me on this particular page. Is there a way to prevent back swipe only using jquery, polymer, javascript, or some combination of all three?
I am working with the google plus API for photospheres.
For showing a time lapse panorama I have set up two divs on top of each other which get iframes with the embedded panorama viewer.
Then I have set up a timer which blends over from the front to the back div and it all works fine.
I have set it up here on jsfiddle
My problem is, that those panoramas are interactive so you can click in it, drag it around and click again to resume autorotate or use the mouse wheel to zoom in or out. The moment I do that my two panoramas are no longer in sync so the "illusion" of time lapse does not work any more.
Is there a way to duplicate all mouse events and send them to both divs at the same time?
I was able to register clicks using jquery and
$('#firstDiv').click(function(){$('#seconddiv').click()})
but I am struggling to replicate the mouse dragging and wheel zooming to keep the two panoramas in sync.
You could maybe give this variation a shot:
$('#firstDiv).on('click', function(){
$('#secondDiv').trigger('click');
});
But it seems that the interactive controls for the sphere are handled on the google side. So, unless there's a callback option (by passing a query string parameter to the iframe) to enable explicit control, I'd say it's not possible.
Short version: Can mouse wheel events be fired while in the middle of a drag+drop operation?
Long version:
I'm currently in the design phase for this particular feature, so I don't have any code yet. I'm asking this so I know if it's a waste of time to pursue this path, so I can design something else instead.
Basically, I have a list of items on one side, and a basket on the other. As it stands right now, each item has an input box and a button so you can type the quantity and add it to the basket (and same thing in reverse). I want to add drag and drop functionality so you can just drag items one way or the other. This works fine if you only want one of the item, but I'd like to add a way to adjust the quantity while dragging. The mouse wheel came to mind, since you're already using the mouse to drag in the first place.
So before I dive into the code, I need to know if it's actually possible to receive mouse wheel events during a drag, and if so where should I add the listener?
If you want to check if the primary mouse button is being pressed during a wheel event, you can use the following:
addEventListener('wheel', function (event) {
if (event.buttons & 1) {
alert("You scrolled while the primary mouse button was down!");
}
}
Unfortunately, if you're using the Drag and Drop API with the draggable='true' attribute, wheel and scroll events are not fired during a drag, so you will be unable to fire and handle a scroll event.
I have seen a feature on a site I would like to emulate. I have intermediate php skill but am a novice javascript user. The feature is the site content displayed in divs which can be moved around on the screen and their position saved using cookies. This site: [url]www.nowgamer.com[/url] is where I saw it (latest podcasts, videos, reviews etc with filter)
How would I go about achieving this through javscript? I want to know how to connect javascript with the cookie so that the positions of the square divs are saved, as are the preferences of the content filter on each div. How can I achieve this?
Would this be a big job? Thank you for any help, I am working independently on this in my spare time so your contribution with advice is my lifeline.
As Zoidberg commented, its easy with JQuery or Yui, or any other javascript library that provides drag & drop functionality. They are almost easy to configure, checking at demo they give. They also expose certain events like beforeDrag, afterDrag, onDrop, etc. where you can fire a simple js function check the elements' dropped position store it in cookies. For setting cookies, there are world of code on internet.
Also, you might want to check floating absolute/relative positioning css, if your DOM divs are going to be floating around the page.
GoodLuck.
simplyharsh has the proper answer, but I'd like to expand on it a bit:
The basics of a draggable div aren't too complicated. You attach an onclick handler to initiate the dragging. Internally, that's accomplished by changing the div's CSS so it's position: absolute. Then you start monitoring mouse movements (basically onmousemove) and changing the div's top and left according to the movements you've captured.
Dropping is a bit more complicated. You can always just release the mouse and leave the div wherever you ended up moving it, but that leaves it absolutely positioned and therefore outside of normal document flow. But dropping it "inside" some other element means a lot of prep work.
Because of how mouseover/mouseout/mouseenter events work, they WON'T work while you're dragging an element - you've got your draggable div under the mouse at all times, so there's no mouseenter/leave events being fired on the rest of the page. jquery/mootools and the like work around it letting you specify drop zones. The locations/sizes of these zones are precalculated and as you're dragging. Then, as you're dragging, the dragged object's position is compared to these precalculated drop zone locations for every move event. If you "enter" one of those zones, then internally the libraries fire their mouseenter/mouseleave/mouseover events to simulate an actual mouseenter/leave/over event having occured.
If you drop inside a zone, the div gets attached as a child of that zone. If you drop outside, then it will usually "snap back" to where it was when you initiated the drag.
Resizing is somewhat similar, except you're adjusting height and width instead of top and left.