home > Drawing floating content, onmouse location w/innerHTML (fastest)

This also uses the drag n drop code. I use one target div that is always on the page hidden with no size positioned absolute. Draw whatever content you want to this div which has the drag n drop code active on it.

You can also use the full DOM to create the elements and add them to the page. I do this for the right click menus. However when you have large amounts of data to re-write using "innerHTML" is the fastest way. This is also by far the simplest as adding elements to the DOM is clunky. Good mix is creating one DIV and adding it to the DOM then innerHTMLing the contents.

(NOTE: For speed reasons in IE don't concat your HTML to be drawn to the screen, instead use an array and join it at the end. This also makes for neater HTML if you join it with new lines.)
Click inside this box to create a floating box that opens on the mouse coordinates and is dragable. 

function drawBox(event)
{
    var aInnerHtml = new Array();
    aInnerHtml.push('drag me here<br />');
    aInnerHtml.push('<table class="table" cellpadding="0" cellspacing="0" onmouseover="this.style.cursor = \'default\';"');
        for (var i = 1; i <= 15; i++)
        {
            aInnerHtml.push('<tr>');
                for (var j = 1; j <= 8; j++)
                {
                    aInnerHtml.push('<td style="white-space: nowrap;">');
                        aInnerHtml.push('row' + i + ' cell' + j);
                    aInnerHtml.push('</td>');                    
                }
            aInnerHtml.push('</tr>');            
        }
    aInnerHtml.push('</table>');
    
    var obj = document.getElementById('target_div');
    obj.innerHTML = aInnerHtml.join("\n");
    setBox(obj, event.clientX, event.clientY, 711, 100);
}

function setBox(obj, x, y, width, height)
{
    obj.style.height = height + 'px;'
    obj.style.width  = width + 'px;'    
    obj.style.top    = y + 'px';
    obj.style.left   = x + 'px';
    obj.style.visibility = 'visible';            
}