Using SVG.js, I a have div that I placed in the svg as foreignobject. The div sizes nicely based on it innerHTML. I would like it be draggable. I added draggable() to the foreignobject, but it is not working properly: it does not retain the x,y dragged values.
Any ideas?
Below is an example of the problem.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SVG.js - Draggable foreignobject </title>
<script type="text/javascript" src="//svgDiscovery.com/SVG.js/svg.js"></script>
<script type="text/javascript" src="//svgDiscovery.com/SVG.js/Plugins/svg.foreignobject.js"></script>
<script type="text/javascript" src="//svgDiscovery.com/SVG.js/Plugins/svg.draggable.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body style='padding:10px;font-family:arial;'>
<center>
<h4>SVG.js - Draggable foreignobject </h4>
<table>
<tr>
<td>
<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'></div>
</td>
</tr></table>
<script id=myScript>
var mySVG = SVG('svgDiv').size(400, 400);
var fobj = mySVG.foreignObject().attr({id: 'fobj'})
fobj.move(30,30)
fobj.draggable()
var txt = "some text that is quite long. and it goes on and on. and it's pointless really. and the grammar is terrible. blah. blah. blah"
fobj.appendChild("div", {id: 'myDiv', innerHTML: txt})
myDiv.style.cursor = 'move'
myDiv.style.width = '200px'
myDiv.style.padding = '10px'
myDiv.style.background = 'white'
myDiv.style.height = myDiv.scollHeight+'px'
myDiv.style.border = "solid black 1px"
</script>
</body>
</html>