纯javascript和css拆分器代码使用拖放，光标问题

我试图将光标设置在我的下拉面板上，但我得到了闪烁效果。

我如何为我的示例工作设置光标？

我尝试了很多事情来做这项工作。

我使用此代码，但我想改善拖放的视觉效果。

我尝试了其他事件以使此示例使用右光标工作，但没有人正常工作，我将拆分器定位为在拖动事件上工作的实际功能更改为工作，因为 ondragenter 不起作用。

//---------------------------------------------------------------------------------------------------------
function handleDragStart(pEvent, pTarget)
{
    //Seta as propriedades
    pEvent.dataTransfer.effectAllowed = 'move';
    pEvent.dataTransfer.setData("text", pTarget.id);
}
function handleDragOver(pEvent, pTarget)
{
    if (pEvent.preventDefault) { pEvent.preventDefault(); }
    pEvent.dataTransfer.dropEffect = 'move';
    //Pega a referência dos componentes
    var ldivMain = document.getElementById('divMain');
    var ldivLeft = document.getElementById('divLeft');
    var ldivRight = document.getElementById('divRight');
    //Armazena a posição divSplitterV
    var lPosX = pEvent.clientX;
    var lSize_Max = ldivMain.clientWidth -12;
    var lSize_New = lSize_Max - lPosX;
    //See here !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    //Not working got a flicker effect
    //ldivLeft.style.cursor = 'e-resize';
    //ldivRight.style.cursor = 'e-resize';
    //Ajusta o tamanho do painel
    ldivLeft.style.width = lPosX + 'px';
    //Verifica qual o lado foi redirecionado
    ldivRight.style.width = lSize_New + 'px';
    return false;
}
function handleDragLeave(pEvent, pTarget)
{
    //Remove a classe do item
    //pTarget.classList.remove('dragover');
}
function handleDrop(pEvent, pTarget)
{
    //Stops the browser from redirecting.
    if (pEvent.preventDefault) { pEvent.preventDefault(); }
    if (pEvent.stopPropagation) { pEvent.stopPropagation(); }
    //Return
    return false;
}
function handleDragEnd(pEvent, pTarget)
{
    var ldivLeft = document.getElementById('divLeft');
    //Splitter vertical
    pTarget.style.left = ldivLeft.clientWidth + 'px';
}
//Splitter-----------------------------------------------------------------------------------------
function SETSplitterPosition()
{
    var ldivLeft = document.getElementById('divLeft');
    var ldivSplitterV = document.getElementById('divSplitterV');
    //Splitter vertical
    ldivSplitterV.style.top = '60px';
    ldivSplitterV.style.bottom = '60px';
    ldivSplitterV.style.left = ldivLeft.clientWidth + 'px';
}
//Functions----------------------------------------------------------------------------------------
function SETLayoutSize()
{
    var ldivMain = document.getElementById('divMain');
    var ldivLeft = document.getElementById('divLeft');
    var ldivRight = document.getElementById('divRight');
    var lSize_Max = ldivMain.clientWidth -12;
    var lSize_Band = (lSize_Max / 2);
    ldivLeft.style.width = lSize_Band + 'px';
    ldivRight.style.width = lSize_Band + 'px';
    SETSplitterPosition();
}
//Load Events--------------------------------------------------------------------------------------
function Body_OnLoad()
{
    SETLayoutSize();
}
function Body_OnResize()
{
    SETLayoutSize();
}

body
{
    background-color: #000000;
}
div.main
{
    background-color: #000000; 
    position: absolute; top: 10px; left: 10px; right: 0px; bottom: 10px; 
}
div.top
{
    background-color: #ffd700;
    position: absolute; top: 0px; left: 0px; right: 10px; height: 50px; 
}
div.left
{
    background-color: #424242;
    position: absolute; top: 60px; left: 0px; bottom: 60px; 
    border-right:solid 1px #ffd700;
}
div.right
{
    background-color: gray;
    position: absolute; top: 60px; right: 10px; bottom: 60px; 
    border-left:solid 1px red;
}
div.bottom
{
    position: absolute; left: 0px; right: 10px; bottom: 0px; height: 50px; background-color: greenyellow;
}
/*--Splitter--*/
div.splitter_vertical
{
    background-color: #000000; cursor: e-resize;
    position: absolute; width: 2px; z-index: 5;
}

<!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>

在 div.splitter_vertical 上创建一个伪元素，这将使它足够宽，可以抓住，但不会影响它的外观。

例如，这将允许您在左侧的 10px 和右侧的 10px 之间抓取拆分器：

div.splitter_vertical:before {
  content: '';
  position: absolute;
  height: 100%;
  left: -10px;
  width: 20px;
}

//---------------------------------------------------------------------------------------------------------
function handleDragStart(pEvent, pTarget)
{
    //Seta as propriedades
    pEvent.dataTransfer.effectAllowed = 'move';
    pEvent.dataTransfer.setData("text", pTarget.id);
}
function handleDragOver(pEvent, pTarget)
{
    if (pEvent.preventDefault) { pEvent.preventDefault(); }
    pEvent.dataTransfer.dropEffect = 'move';
    //Pega a referência dos componentes
    var ldivMain = document.getElementById('divMain');
    var ldivLeft = document.getElementById('divLeft');
    var ldivRight = document.getElementById('divRight');
    //Armazena a posição divSplitterV
    var lPosX = pEvent.clientX;
    var lSize_Max = ldivMain.clientWidth -12;
    var lSize_New = lSize_Max - lPosX;
    //See here !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    //Not working got a flicker effect
    //ldivLeft.style.cursor = 'e-resize';
    //ldivRight.style.cursor = 'e-resize';
    //Ajusta o tamanho do painel
    ldivLeft.style.width = lPosX + 'px';
    //Verifica qual o lado foi redirecionado
    ldivRight.style.width = lSize_New + 'px';
    return false;
}
function handleDragLeave(pEvent, pTarget)
{
    //Remove a classe do item
    //pTarget.classList.remove('dragover');
}
function handleDrop(pEvent, pTarget)
{
    //Stops the browser from redirecting.
    if (pEvent.preventDefault) { pEvent.preventDefault(); }
    if (pEvent.stopPropagation) { pEvent.stopPropagation(); }
    //Return
    return false;
}
function handleDragEnd(pEvent, pTarget)
{
    var ldivLeft = document.getElementById('divLeft');
    //Splitter vertical
    pTarget.style.left = ldivLeft.clientWidth + 'px';
}
//Splitter-----------------------------------------------------------------------------------------
function SETSplitterPosition()
{
    var ldivLeft = document.getElementById('divLeft');
    var ldivSplitterV = document.getElementById('divSplitterV');
    //Splitter vertical
    ldivSplitterV.style.top = '60px';
    ldivSplitterV.style.bottom = '60px';
    ldivSplitterV.style.left = ldivLeft.clientWidth + 'px';
}
//Functions----------------------------------------------------------------------------------------
function SETLayoutSize()
{
    var ldivMain = document.getElementById('divMain');
    var ldivLeft = document.getElementById('divLeft');
    var ldivRight = document.getElementById('divRight');
    var lSize_Max = ldivMain.clientWidth -12;
    var lSize_Band = (lSize_Max / 2);
    ldivLeft.style.width = lSize_Band + 'px';
    ldivRight.style.width = lSize_Band + 'px';
    SETSplitterPosition();
}
//Load Events--------------------------------------------------------------------------------------
function Body_OnLoad()
{
    SETLayoutSize();
}
function Body_OnResize()
{
    SETLayoutSize();
}

body
{
    background-color: #000000;
}
div.main
{
    background-color: #000000; 
    position: absolute; top: 10px; left: 10px; right: 0px; bottom: 10px; 
}
div.top
{
    background-color: #ffd700;
    position: absolute; top: 0px; left: 0px; right: 10px; height: 50px; 
}
div.left
{
    background-color: #424242;
    position: absolute; top: 60px; left: 0px; bottom: 60px; 
    border-right:solid 1px #ffd700;
}
div.right
{
    background-color: gray;
    position: absolute; top: 60px; right: 10px; bottom: 60px; 
    border-left:solid 1px red;
}
div.bottom
{
    position: absolute; left: 0px; right: 10px; bottom: 0px; height: 50px; background-color: greenyellow;
}
/*--Splitter--*/
div.splitter_vertical
{
    background-color: #000000; cursor: e-resize;
    position: absolute; width: 2px; z-index: 5;
}
div.splitter_vertical:before {
  content: '';
  position: absolute;
  height: 100%;
  left: -10px;
  width: 20px;
}

<!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>

相关内容

最新更新

热门标签：