Overlay spotfire controls values over visualizations

just add a dragTool.js in any text area and wrap elements with class=drag to see the dragtool postions

html

<div class='drag' id='hint1'>drag me</div>
<div class='drag' id='hint2'>take me</div>
<div class='drag' id='hint3'>move me</div>

dragTool.js 

toolBox = `<div class='drag' id="dragTool">
<div id='title'>Drag Tool</div>
<textarea id='style' >

1. Edit text area in html

2. Drag spotfire controls wrapped in class='drag' html tag
   E.g.: <font size=3 class='drag'><spotifrecontrol></font>

3. After dragging all the elements, copy the generated 
   output inside the <style> tag

4. Optionally remove javascript script (do not delete) 
   when done and save text area.

</textarea>
</div>


<style>
/*Draggable tool*/
#dragTool  {top:36.21345%; left:5.46445%;}


.drag{
 position:fixed;
 z-index:10;
}

#dragTool{
 position:fixed;
 height:220px; 
 z-index:10;

}
#dragTool textarea{
 height:200px;
 width:400px;
 background:#fff;
 color: rgb(135,0,135);
 font-family:courier;
 padding:10px;
 opacity: 1;
}

#dragTool #title{
 background:rgb(75,75,75);
 color:#fff;
 border:1px solid rgb(64,64,64);;
 padding:5px;
 font-size:13px;
 opacity: 1;
 padding:10px;
}

.container {position:relative;width: 100%;line-height: 0;}
.container img{max-width: 100%;}

</STYLE>`

var node = document.createElement("div");                 // Create a <li> node
if(!document.getElementById('dragTool')){
node.innerHTML=toolBox
document.body.appendChild(node);
}

highlightOn = true

//show window
$("#dragTool").show();


//make spotfire controls draggable by adding drag class
//<div class='drag'>test</div>
$(".drag").draggable({

  cursor: "move",
 drag: function (e) {

   id = $(this).attr('id')

   //calculate magic % numbers
  let left = (parseFloat($(this).position().left)) + "px" // / parseFloat($(window).width())) ).toFixed(5) + "%" ;
  let top = (parseFloat($(this).position().top)) + "px" // / parseFloat($(window).height())) ).toFixed(5) + "%" ;

   //store magic numbers
  mn = `#${id}\t\t{top:${top}; left:${left};}`
  $(this).attr("magicNumbers", mn)
 },
 refreshPositions: true,
 stop: getPositions
}).css({
 //border:"1px dashed blue",
 //"padding-bottom":"2%",
 //background:'yellow',
 cursor: "move",
 'backgroundColor': (highlightOn) ? "rgba(255, 55, 00,.09)" : ""
})

function getPositions() {
 positions = "";
 $(".drag").each(function (i, e) {
  //newMN = $(this).attr('magicNumbers')
  el = $(this)
  aPos = $(this).attr('magicNumbers')
  positions += aPos ? aPos + "\n" : "";
 })
 $('#style').val(positions)
}