Home/ Questions/Q 959657
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T01:03:41+00:00

So here’s my code: function drawGridSquare(tableText) { gridSquare = document.getElementById(‘square’); gridSquare.innerHTML = tableText; document.body.appendChild(gridSquare);

  • 0

So here’s my code:

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

This function is called on mousedown from a td element:

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

This generates a pretty little square which uses jQuery draggable/droppable function. All I want to do is while the user’s mouse is STILL pressed down, the focus would revert to the gridSquare that was created.

What are my options for this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Seeing as how I couldn’t find a clear way to do this, my work around is as follows:

    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>
    • 0