Question

所以这是我的代码：

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 / droppable函数的漂亮小方块。我想要做的就是当用户的鼠标按下STILL时，焦点将恢复为创建的gridSquare。

我对此有何选择？

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

将mousedown焦点更改为新div

1 个答案: