[svg-developers] Drag SVG elements

[[e-mail] [svg-developers]]

Hi Team,


I'm working on a small SVG project and would like to drag the SVG elements by their ID or class. Below is the svg element. This element is inside a parent SVG and would like to drag this child within it's parent SVG.


<svg id="1" width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg" class="ui-draggable ui-draggable-handle" style="position: relative;">

<rect x="30" y="0" width="100" height="85" stroke="black" fill="yellow" stroke-width="2"></rect>


<line id="pin1" x1="0" x2="30" y1="18" y2="18" stroke="black" fill="black" stroke-width="2"></line>
<line id="pin2" x1="0" x2="30" y1="36" y2="36" stroke="black" fill="black" stroke-width="2"></line>
<line x1="0" x2="30" y1="54" y2="54" stroke="black" fill="black" stroke-width="2"></line>
<line x1="0" x2="30" y1="72" y2="72" stroke="black" fill="black" stroke-width="2"></line>

<line x1="130" x2="160" y1="18" y2="18" stroke="black" fill="black" stroke-width="2"></line>
<line x1="130" x2="160" y1="36" y2="36" stroke="black" fill="black" stroke-width="2"></line>
<line x1="130" x2="160" y1="54" y2="54" stroke="black" fill="black" stroke-width="2"></line>
<line x1="130" x2="160" y1="72" y2="72" stroke="black" fill="black" stroke-width="2"></line>

<text x="32" y="20">1 </text>
<text x="32" y="38">2</text>
<text x="32" y="58">3</text>
<text x="32" y="75">4</text>

<text x="120" y="75">5</text>
<text x="120" y="58">6</text>
<text x="120" y="38">7</text>
<text x="120" y="20">8</text>

</svg>




Thanks,
Arun