We Keep Coding

FullCalendar with ReactJS: how to keep the original event visible during dragging (like when coping the event with Ctrl pressed)?

I am working on functionality to copy event with keyboard Ctrl key pressed and then drag & drop the event with the mouse. It works pretty good now but I reached to the point where the original event is not visible during dragging which looks strange and must be avoided somehow.
Is there an option or workaround to avoid this disappearing of the original event during dragging? Perfect would be to display the event with some transparency during each dragging.
Here I prepared one sandbox for easier testing:
https://codesandbox.io/s/thirsty-cookies-veh6ow?file=/src/DemoApp.jsx
Please pay attention that in this sandbox, by some reason, you need to keep mouse on focus with the testing area or right. Just click on the text input on top before start testing the functionality in case it is not on focus. Then you must be able to copy each event by dragging it with left mouse key and keyboard Ctrl key pressed down.

Drag, drop and mousewheel?

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.

When does onmouseout occur?

I mean does it occur every single moment when the mouse is not over the element? Or is it a single action when mouse leaves the element? It is important because I need to know when the mouse pointer leaves the element, but I need to know only when it enters again. I don't want my script to run over and over again while the mouse pointer is not over the element.

The mouseout event fires when the user moves the mouse out of an element. Unfortunately these events bubble up.
http://www.quirksmode.org/dom/events/mouseover.html
If you do not want the event to bubble up, add event.stopPropagation();

The mouseout event is raised when the mouse leaves an element (e.g,
when the mouse moves off of an image in the web page, the mouseout
event is raised for that image element).
Source: MDN
This would imply that it only occurs once and not continuously, since the mouse can only move off of the element at a single point in time. Once the mouse is off the element the event has been fired.

What mouse/touch events should I use to cause a div to change color when cursor is dragged over it?

I'd like to know what mouse events I need to use for the task below.
When a cursor is dragged over a div, the div changes color.
By dragged I mean that the mouse button has been clicked once (and not released) somewhere outside the div and then the cursor has been moved over the div (the mouse button has not been released at any time during this process).
The div shouldn't respond to onmouseover. The mouse button needs to have been depressed and then dragged over the div to activate the change in the div.
I'm also wondering if there are any equivalent events for touch devices?

If i understand this right you can do the following:
set a global variable "mousedown" to false
use the "onmousedown" event to set "mousedown" to true
use the "onmouseover" event of your div to fire a function where you first check if mousedown is true and if so make the div visible
use the "onmouseup" event on your page to set "mousedown" to false again
For anything javascript related to touch event you should have a look at Sencha Touch
EDIT: If you want to avoid such frameworks. You should have a look at The HTML5 Specification. There are a couple of new events related to touch devices.
Here is a nice article about it:
http://www.html5rocks.com/en/mobile/touch.html

I'd recommend JQueryUI for this - it has several drag-specific events built-in. The drag event for touch devices is called touchmove

Detect if mouse button is down when the mouse entered active area (mouse was pressed down outside this area)

I am new to JavaScript so I might be missing something obvious here, but this is the problem. I am not getting the mouse down / up event if the event happened outside the active area under JavaScript control, so if the mouse enters the active area (onmouseover event) with the left button down, is there a way to know that the button is down?
Added info : Ideally, I would like to keep track of the mouse even outside the browser window - the way Google maps does - try clicking down the mouse button and move outside the browser - this works in chrome and with some quirks in Firefox. Is it possible to do this while remaining within the bounds of JavaScript or is it some proprietary stuff?

Yes: ensure that the mouse event handlers to detect a mouse-down event are attached to some element that occupies the entire viewport. For instance the HTML (document) element...