I have a div that is absolutely positioned above other absolutely positioned divs and I want the divs below the have both mouseover, mouseout and click events and the top div to have click events also.
The only way I've been able to get mouse events on the divs below is to add pointer-events: none to the above div but then the above div does not get click events when that css property is present.
Here is a codepen showing the problem
http://codepen.io/Wryte/pen/qsEBp
#Wryte AH! ok, there is a problem with what you are trying to accomplish. The shade is not a container as a layer over the whole outer div that covers the rest of the inner DIVs. Since the shade div is not in the chain for event bubbling it won't get called or if you catch events on the shade DIV you won't get the events triggered on the inner DIVs.
What you can do, is to darken the outer DIV and add transparency to the inner DIVs. Why do you need to track events on the shade DIV by the way?
Related
I am trying to create draggable chess pieces but I can't find any way to drop a piece on a square because when I hover over a droppable position while dragging a piece then the mouseenter event is not firing. I have noticed that z-index is the reason because when I put a lower z-index on a draggable piece then the mouseenter event works but this is not ideal since I can't see a piece that I am dragging anymore.
Here is a codepen that simulates the same behaviour (you have to open a console). When mouse enters a black box then mouseenter event fires but if mouse enters while dragging a blue box then mouseenter event doesnt fire.
Is there a way to force the mouseenter or mouseover event to fire even when the mouse is hidden behind another HTML element? My goal is to detect when I am dragging over a droppable position so I can move my piece from one div to the other.
I have found similar issue in this old question but I really don't like either tracking x-y coords of every droppable div or creating transparent element over a droppable div with high z-index so I am hoping there is a cleaner solution for this.
Based on Forwarding Mouse Events through layers/divs, looks like you simply have to modify your draggable CSS by adding...
pointer-events: none;
...so that it becomes...
.draggable{
cursor: grab;
position:absolute;
z-index: 5;
--size: calc(100% - 2*var(--padding));
pointer-events: none;
}
What does this do? When the drag starts and applies the draggable class to the element being dragged, it turns off mouse events for the dragged element, thus allowing the mouse events to pass through the dragged element to any elements underneath.
(See https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events for complete list of options and browser support.)
With two nested elements in dropzone and dragging from outer to inner element, dragleave actions take precedence over dragenter.
I have initially one div as dropzone, which on dragenter changes class ('canDrop') to indicate if drop is possible, while on dragleave the class reverts to neutral ('plainDropZone').
On drop the draggable div becomes a child of the dropzone div. Now, when another draggable enters the dropzone, class is changed to 'noDrop' to indicate no more drops are possible. On dragleave the class reverts to neutral again ('plainDropZone')
The Problem: When dragging from outer dropzone div to the inner dropped div, the outer dropzone div should not revert to neutral, but still have the class 'noDrop'.
As far as I have found out this does not work as intended, because when moving from outer to inner div, dragleave gets fired after dragenter. This thread visualizes the problem nicely: HTML 5 drag events: 'dragleave' fired after 'dragenter'
Here is a full demo: https://jsfiddle.net/e12uadgh/
So what would be a way to assign the outer dropzone div the class 'noDrop', when it has a dropped inner div and the user drags a third div from outer dropzone div to inner dropped div?
Found a way to achieve the effect. When dragging an element from outer dropzone div to inner dropzone div, dragleave for outer div is fired after dragenter for inner div, so that any changes on dragenter get overridden by the changes made on dragleave.
So one solution is to make only changes on dragleave, if the next event target is not the inner div. Since this can not be done by examining event.target on dragleave, we can use a toggle instead, which is set to true on dragenter on inner div, and which becomes false on dragleave on inner div.
Here is a demo: https://jsfiddle.net/rookie_sen/2Lp5qg39/5/
I have a draggable div which is initially positioned over a blue header so has a white background with blue text and white border so it stands out.
When it is dragged over the rest of the page which has a white background I would like the background to become blue, text white and border blue.
The draggable div is positioned using absolute so is actually placed outside of the header element so it would need to detect what area of the page it is over.
Can this be done using CSS or Javascript / jQuery?
In JQuery I imagine you could catch the mouseOver event (https://api.jquery.com/mouseover/) and when it is triggered you would see with some check if there is a simulataneous drag happening meanwhile and if it is happening, change the colors of the element where the mouseOver event took place.
important parts of code:
HTML:
<div draggable="true" class="bar">Drag me!</div>
<div id="foo"><p>To be dragged over.</div>
JQuery: At mouseOver see if another element is dragged on the moment:
$( '#foo' ).mouseover(function() {
if ($('.bar').is('.ui-draggable-dragging')) { return; // change color in here. }
});
NOTE: You have to have this attached by id, at least I couldn't imagine how you otherwise apply color change to correct element. Color change can be a function, though, and take in element.
It is possible to make cursor area larger ? I am playing with hover event and i am wondering if it's possible to make the cursor "trigger" area larger.
When the invisible div touches my elemet i want to trigger hover event. Is this possible?
ps: the invisible div follows the mouse.
Then just apply the padding value for that element with higher value as you wish.
Or, if you wished to trigger the hover event after hovering some div, do like this:
$('.invDiv').hover(function(){
$('.hovDiv').trigger('hover');
});
And your invisible div should not be hidden but instead use blank div and apply width and height for that area...
I have a hover event set on an element that use's jQuery UI's position function to show a div right underneath it, with the "out" set to hide that div.
The problem is, subsequent hovers position that div further and further on each hover.
Example: http://jsfiddle.net/Shpigford/8ZkgJ/
Hover over the red box, then hover over it again and you'll see the blue box quickly get positioned further and further to the right.
Same thing happens if I change to a click event. Seems like something odd is happening with positioning when I hide the div and then try to show it again.
Instead of position({...}).show(), use show().position({...}). The reason is that positon won't work when the element is invisible. You can find the following note at http://api.jqueryui.com/position/:
jQuery UI does not support positioning hidden elements