Javascript 将鼠标向下焦点更改为新的div_Javascript_Jquery

Javascript 将鼠标向下焦点更改为新的div

javascript jquery

Javascript 将鼠标向下焦点更改为新的div,javascript,jquery,Javascript,Jquery,这是我的代码： function drawGridSquare(tableText) { gridSquare = document.getElementById('square'); gridSquare.innerHTML = tableText; document.body.appendChild(gridSquare); gridSquare.style.display = '

这是我的代码：

function drawGridSquare(tableText)
        {
            gridSquare = document.getElementById('square');
            gridSquare.innerHTML = tableText;
            document.body.appendChild(gridSquare);
            gridSquare.style.display = 'block';
            gridSquare.style.top = e.pageY - gridSquare.offsetHeight + 1;
            gridSquare.style.left = e.pageX - gridSquare.offsetWidth/2;
            gridSquare.focus();
        }

从td元素mousedown调用此函数：

<td onmousedown="drawGridSquare('textData');">

这将生成一个非常小的正方形，它使用jQuery的draggable/dropable函数。我想做的就是当用户的鼠标仍然按下时，焦点将恢复到创建的gridSquare

我的选择是什么？

鉴于我无法找到一个明确的方法来实现这一点，我的解决方法如下：

function drawGridSquare(tableText, cellPosition)
        {
            gridSquare = document.getElementById('square');
            gridSquare.innerHTML = tableText;
            document.body.appendChild(gridSquare);
            gridSquare.style.display = 'block';
            startPositionX = endPositionX = cellPosition;
            gridSquare.style.top = mouseY(event) - gridSquare.offsetHeight + 1;
            gridSquare.style.left = mouseX(event) - gridSquare.offsetWidth/2;
            squareReady = true;
        }

        function moveGridSquare()
        {
            if (squareReady)
            {
                squareIsMoving = true;
                characterWidth = 1;
                gridSquare = document.getElementById('square');
                gridSquare.style.top = mouseY(event) - gridSquare.offsetHeight + 1;
                gridSquare.style.left = mouseX(event) - gridSquare.offsetWidth/2;
            }
        }

function selectionEnd() {
    if (squareIsMoving)
            {
                //Code to DROP INTO THE GRID
                var dataStart = (Math.round((startPositionX) / characterWidth)) + 1;
                var dataLength = Math.abs((Math.round((endPositionX)/characterWidth)) - (Math.round((startPositionX) / characterWidth)));
                var data = dataStart + "," + dataLength + "," + theSelectedText;
                dropDone(data);

                //Set square to false
                squareIsMoving = false;
                squareReady=false;

                //Destroy the square
                document.getElementById('square').innerHTML = "";
                document.getElementById('square').style.display = 'none';
            }
}
<body onmousemove="moveGridSquare();">
<div id="square" onmousedown="squareReady=true;moveTheSquare();" onmouseup="selectionEnd();" style="display:none;" ></div>

函数drawGridSquare（表格文本，单元格位置）
{
gridSquare=document.getElementById（'square'）；
gridSquare.innerHTML=表格文本；
document.body.appendChild（gridSquare）；
gridSquare.style.display='block'；
开始位置X=结束位置X=单元位置；
gridSquare.style.top=mouseY（事件）-gridSquare.offsetHeight+1；
gridSquare.style.left=mouseX（事件）-gridSquare.offsetWidth/2；
squareReady=true；
}
函数moveGridSquare（）
{
如果（准备就绪）
{
平方移动=真；
字符宽度=1；
gridSquare=document.getElementById（'square'）；
gridSquare.style.top=mouseY（事件）-gridSquare.offsetHeight+1；
gridSquare.style.left=mouseX（事件）-gridSquare.offsetWidth/2；
}
}
函数selectionEnd（）{
如果（平方移动）
{
//要放入网格的代码
VarDataStart=（数学圆（（startPositionX）/characterWidth））+1；
var dataLength=Math.abs（（Math.round（（endPositionX）/characterWidth））-（Math.round（（startPositionX）/characterWidth））；
var data=dataStart+“，“+dataLength+”，“+theSelectedText；
dropDone（数据）；
//设平方为假
平方移动=假；
squareReady=false；
//摧毁广场
document.getElementById（'square'）.innerHTML=“”；
document.getElementById（'square'）.style.display='none'；
}
}

你的意思是，当方块弹出时，你想在不释放鼠标按钮的情况下拖动i，然后再次在方块上按下鼠标吗？不。我想显示方块，并在用户移动方块时将鼠标向下移动。当放手时，应该调用jQuery中的draggable命令。如果可能的话，我仍然在寻找直接方法。