如何将可拖动图像限制在2个确定的边界之间？

Question

我有一个嵌入svg文件的html文件，该文件有助于在包含2个圆圈的容器之间拖动图像。 在链接中，我分享了视频。 如您所见，我能够将图像拖动到容器中的任何点，但是如果我尝试将图像放置在圆圈之外，我想限制图像被拖动。 那只落下的区域应该是2个圆圈。

如何实现？ 我正在添加SVG文件以供参考。

SVg文件和html文件

 ***<!-------SVG FILE ------------>*** <svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg' xmlns:xlink="http://www.w3.org/1999/xlink" onload='Init(evt)' onmousedown='Grab(evt)' onmousemove='Drag(evt)' onmouseup='Drop(evt)'> <title>Drag And Drop Assignment</title> <script><![CDATA[ var SVGDocument = null; var SVGRoot = null; var TrueCoords = null; var GrabPoint = null; var BackDrop = null; var DragTarget = null; function Init(evt) { SVGDocument = evt.target.ownerDocument; SVGRoot = SVGDocument.documentElement; TrueCoords = SVGRoot.createSVGPoint(); GrabPoint = SVGRoot.createSVGPoint(); BackDrop = SVGDocument.getElementById('BackDrop'); } function Grab(evt) { // find out which element we moused down on var targetElement = evt.target; if ( BackDrop != targetElement ) { //set the item moused down on as the element to be dragged DragTarget = targetElement; DragTarget.parentNode.appendChild( DragTarget ); DragTarget.setAttributeNS(null, 'pointer-events', 'none'); var transMatrix = DragTarget.getCTM(); GrabPoint.x = TrueCoords.x - Number(transMatrix.e); GrabPoint.y = TrueCoords.y - Number(transMatrix.f); } }; function Drag(evt) { // account for zooming and panning GetTrueCoords(evt); // if we don't currently have an element in tow, don't do anything if (DragTarget) { var newX = TrueCoords.x - GrabPoint.x; var newY = TrueCoords.y - GrabPoint.y; DragTarget.setAttributeNS(null, 'transform', 'translate(' + newX + ',' + newY + ')'); } }; function Drop(evt) { // if we aren't currently dragging an element, don't do anything if ( DragTarget ) { var targetElement = evt.target; DragTarget.setAttributeNS(null, 'pointer-events', 'all'); if ( 'Folder' == targetElement.parentNode.id ) { targetElement.parentNode.appendChild( DragTarget ); alert(DragTarget.id + ' has been dropped into a folder, and has been inserted as a child of the containing group.'); } else { alert(DragTarget.id + ' has been dropped on top of ' + targetElement.id); } DragTarget = null; } }; function GetTrueCoords(evt) { // find the current zoom level and pan setting, and adjust the reported // mouse position accordingly var newScale = SVGRoot.currentScale; var translation = SVGRoot.currentTranslate; TrueCoords.x = (evt.clientX - translation.x)/newScale; TrueCoords.y = (evt.clientY - translation.y)/newScale; }; ]]></script> <rect id='BackDrop' x='-10%' y='-10%' width='110%' height='110%' fill='none' pointer-events='all' /> <image id="p1" x='100' y='10' width="50" height="50" xlink:href="https://media.giphy.com/media/l3vR16pONsV8cKkWk/giphy.gif" /> <!-- <circle id='BlueCircle' cx='25' cy='25' r='20' style='fill:blue; '/> <rect id='GreenRectangle' x='50' y='70' width='100' height='100' style='fill:green; '/> --> <g id='Folder'> <circle id='FolderRectangle' cx='300' cy='100' r='50' style='fill:yellow; stroke:brown; stroke-width:3;'/> <circle id='FolderRectangle2' cx='500' cy='100' r='80' style='fill:green; stroke:black; stroke-width:3;'/> </g> </svg>