将 mousedown 焦点更改为新的 div答案

【问题标题】：Change mousedown focus to a new div将 mousedown 焦点更改为新的 div
【发布时间】：2011-03-23 08:12:12
【问题描述】：

这是我的代码：

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 元素调用此函数：

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

这会生成一个漂亮的小方块，它使用 jQuery 可拖放功能。我要做的就是在用户的鼠标仍然按下时，焦点将恢复到创建的 gridSquare。

对此我有什么选择？

【问题讨论】：

你的意思是当方块弹出时，你希望能够拖动i，而不必松开鼠标，然后再次mousdown在方块上？
没有。我想显示正方形，并在用户移动正方形时将鼠标留在那儿。放开时，应调用 jQuery 中的可拖动命令。

标签： javascript jquery

【解决方案1】：

鉴于我找不到明确的方法来做到这一点，我的工作如下：

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>

【讨论】：

如果可能的话，我还在寻找直接的方法。