We are using the position absolute element as a child of position relative element in our application. We have used the javascript drag and drop events for our custom functions.
Issue :
While drag the files over the absolute element it fluctuated.
Sample: .ts
Steps to reproduce:
1.Drag any files in to drop target.
2.While you are hovering over the target, absolute element will be displays with yellow background.
3.Hover the dragged file over the yellow region. Now yellow, region will fluctuate.
Can you please suggest how can i resolve this issue in our side?
We are using the position absolute element as a child of position relative element in our application. We have used the javascript drag and drop events for our custom functions.
Issue :
While drag the files over the absolute element it fluctuated.
Sample: https://stackblitz./edit/typescript-avv5u1?file=index.ts
Steps to reproduce:
1.Drag any files in to drop target.
2.While you are hovering over the target, absolute element will be displays with yellow background.
3.Hover the dragged file over the yellow region. Now yellow, region will fluctuate.
Can you please suggest how can i resolve this issue in our side?
Share Improve this question asked Mar 11, 2019 at 4:46 Karthik RavichandranKarthik Ravichandran 1,2932 gold badges16 silver badges26 bronze badges2 Answers
Reset to default 6CSS Solution
Disable pointer-events for all children of the drop target parent.
#droptarget * {
pointer-events: none;
}
CodeSandbox
Consider debouncing and throttling your event handler. Adding basic implementation.
let droptarget = document.getElementById('droptarget');
droptarget.addEventListener('dragover', function(e: any) {
droptarget.classList.add('drag-hover');
e.preventDefault();
e.stopPropagation();
})
var eventThrottled = false;
function dragHandler() {
if(eventThrottled) {
return;
}
droptarget.classList.remove('drag-hover');
eventThrottled = true;
setTimeout(()=>{eventThrottled = false;},2000);
}
droptarget.addEventListener('dragleave', dragHandler);
This disables the handler for 2000ms.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745329491a4622811.html
评论列表（0条）