Issue
Fairly minimal example of my issue.
<!DOCTYPE html>
<html>
<head>
<title>Drag Issue</title>
<style>
body {
margin: 0px;
padding: 0px;
overflow: hidden;
background: gray;
}
div.area {
box-sizing: border-box;
position: absolute;
overflow: hidden;
display: block;
}
div.listbox {
box-sizing: border-box;
display: block;
overflow: scroll;
background: white;
border: 1px solid black;
padding: 3px;
}
div.item {
display: block;
background: white;
font-family: Arial, Hevetical, sans-serif;
}
</style>
</head>
<body>
<div class="area" style="left:0%;top:0%;width:65%;height:33%;background:red">TEXT</div>
<div class="area" style="left:0%;top:33%;width:65%;height:33%;background:white">TEXT</div>
<div class="area" style="left:0%;top:66%;width:65%;height:34%;background:blue">TEXT</div>
<div class="area" style="left:65%;top:0%;width:35%;height:100%;background:green;padding:1em">
<div class="listbox" style="width:90%;height:80%;max-width:90%;max-height:80%">
<div class="item" draggable="true">abc</div>
<div class="item" draggable="true">def</div>
<div class="item" draggable="true">ghi</div>
<div class="item" draggable="true">jkl</div>
</div>
</div>
</body>
</html>
I need to be able to drag text fields (the whole text block, not selected text) from the listbox into the other areas. In Firefox, this works fine, I can drag the item and drop it wherever (obviously does nothing in this example). In Edge, as soon as I start dragging, all the areas apart from the direct ancestor of the dragged block disappear.
Oh, and get this: if the Javascript console is open, it either doesn't happen, or happens after a delay.
Seems like a bug in Edge (and/or underlying toolkit), but I need a workaround. It doesn't happen if you drag images, but I need to be able to drag a text block.
Specifics for my case. Edge and Firefox are the only browsers I need to support, both can be assumed to be pretty recent, but any Javascript-based workaround has to be completely vanilla. Thanks.
Solution
Actually, it is a chromium issue which has been spotted days ago. For more information, you can check this thread.
Workaround:
Apply following styles to the draggable element. In your example, it should be div.item
.
transform: translate(0, 0);
z-index: 0;
Fix:
It is stated this issue has been fixed in version 107. I've performed a test in Edge Beta 107, and this issue has been fixed. So, we can expect that Edge Stable 107 will do the same.
Answered By - Kendrick Li
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.