I am facing an issue with setting the cursor above my drop panel, as it results in a flicker effect. How can I set the cursor for my example to work properly?
I have tried multiple different approaches to make this work.
Although I am using the provided code, I want to enhance the visual aspect of the drag and drop functionality.
I experimented with other events to achieve the desired cursor effect during drag and drop, but none of them seem to work as intended. I had to change the positioning function from the ondragenter event to ondragover event to make it work because the former was not functioning correctly.
//---------------------------------------------------------------------------------------------------------
... (remaining JavaScript code remains the same) ...
body
{
background-color: #000000;
}
div.main
{
background-color: #000000;
position: absolute; top: 10px; left: 10px; right: 0px; bottom: 10px;
}
... (remaining CSS code remains the same) ...
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body onload="Body_OnLoad()" onresize="Body_OnResize()">
<form id="form1" runat="server">
<div id="divMain" class="main">
<div class="top">
</div>
<div id="divLeft" class="left" ondragover="handleDragOver(event, this)" ondrop="handleDrop(event, this)" >
</div>
<div id="divSplitterV" class="splitter_vertical" draggable="true" ondragstart="handleDragStart(event, this)" ondragend="handleDragEnd(event, this)">
</div>
<div id="divRight" class="right" ondragover="handleDragOver(event, this)" ondrop="handleDrop(event, this)">
</div>
<div class="bottom">
</div>
</div>
</form>
</body>
</html>