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.
Related
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.
I have some problems with handling events like scrolling using the mouse wheel or key press. I' ve tried something like this but it won't work:
this.cy.on('wheel', event => {
//somecodehere
});
I didn't find wanted events on Cytoscape.js documentation page: http://js.cytoscape.org/#events. But I thought a thing like this should work fine - unfortunately I was wrong. I try to figure out how to handle this event on my canvas.
What do I want to do with this? I want to make tooltip disappear when the user wants to scroll the page. I've already disabled zoom on scrolling - I want to enable zooming only while "CTRL" key is pressed and in this case, I also didn't find wanted event to handle this. Any solutions? Thanks.
Use DOM API.
document.getElementById("cy").addEventListener("wheel", function(){
console.log("Wheeeellll");
});
This is mostly an 'is this possible' type of question, because after a day of testing options, I am not sure that it is.
We have a list of item within a scrollable DIV, each of which needs to be touch draggable. Just turning on drag and drop for each time will break the ability to scroll the list, as a swipe to scroll gets interpreted as a drag event as well. The easiest option if to add a drag handle to each item, but we have very little UI space available on these items, and the powers that be were hoping to not squeeze things even tighter to add a touch hit area for said handle.
The option I am looking into is a 'touch and hold to release'. The user touched and holds the touch for one second, and the item 'unlocks' to be draggable. This sounded easiest enough when I set out, using HammerJS for the Press event, then calling a start for the drag and drop event process. This is not working out however, as none of the browser drag events can be manually started. I can call 'touchstart' with a trigger or dispatchEvent, which will do the setup we need, but no drag events every occur. 'dragstart' normally gets fired as soon as the touchstart occurs, and since I am needing to wait, there is never and dragstart to kick off the process.
I assume the browser's drag and drop events work only under specific circumstances. Triggering dragstart manually wont be a real drag event (its missing all the dataTransfer stuff), and most importantly, nothing actually gets dragged, despite the element being a valid, draggable element. Using an alternate event like 'dragover' works, but since its there was never a real dragstart, there is no actual drag and drop occurring.
Is this just something that browsers do not support short of dropping the HTML drag and drop for javascript? Or is there something I am missing?
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!
I have an info overlay that works great in Chrome and FF. It is a div containing a table (for border image layout) and then a central content div. I trigger mousedown on the appropriate border table cells.
Once this happens, a different div is brought to the front with z-index, and that passes along the mousemove and mouseup events to handle dragging the info bubble around. Once the mouseup is fired, the info bubble puts the "event" div back to where it was.
I also follow the same process for dragging the lower right corner of the bubble to resize it. Again, works in Chrome and FF, but fails in IE.
IE seems to be restricting the event triggers to the info div. If the mouse manages to move outside the div (from dragging faster then the events fire/update), the info overlay no longer receives mousemove events. However, if I move the mouse back over the overlay (without releasing the button) it continues to receive mouse events.
Edit: In creating some example code (the current functionality is split across several JS modules), it worked in IE. As soon as I find the difference between my example code and the actual code, I will update again.
Edit/Answer: (SO wont let a new user answer their own question in this time span...)
Still not sure what the actual problem was. (If you ask me, a div with a z-index of 100 should be receiving mouse events just fine?)
My solution was to fix my mouse event handling such that I could attach my mousemove and mouseup to the parent div (as should have been done in the first place) for all dragging/resizing behaviors I wanted to set up.
The problem was due to a newbie approach to the events and having stopPropagation() in too many locations preventing me from taking such an approach. (I wanted text, etc in my info box to be selectable).
I adjusted the code so that my text containers only had to stop propagation on mousedown instead of all the mouse events.