Question

我试图将光标设置在我的下拉面板上，但是我有一个闪烁效果。

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

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

我正在使用此代码，但我希望改善拖放的视觉效果。

我尝试了其他事件，使这个示例使用正确的光标并且没有人正常工作，我改变了将分割器放置在dragover事件上的实际功能，因为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>

Answer 1

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

例如，这将让你抓住左边10px和右边10px之间的分割器：

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

＆＃13;

//---------------------------------------------------------------------------------------------------------

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();
}

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

1 个答案: