SVG学习之拖拽
SVG要实现拖拽功能，主要依靠的是鼠标的mousedown、mouseup和mousemove事件，mousedown按下的时候判断是否选取到SVG元素，并定义变量保存该元素，以备之后用到；mouseup主要是拖拽完之后对事件的处理，例如，我想拖拽完之后将坐标保存到数据库，或是拖拽完之后弹出提示等；mousemove主要是改变选取元素的坐标；图像整体的放大缩小由滚轮操作，不用定义即可实现，
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'
οnlοad='Init(evt)' οnmοusedοwn='Grab(evt)' οnmοusemοve='Drag(evt)'
οnmοuseup='Drop(evt)'>
<title>Drag And Drop</title>
<desc>
A nice little demo of drag-and-drop functionality in SVG,
written by Doug Schepers on February 16, 2004.
Use or misuse this code however you wish.
</desc>
<script type="text/javascript"><![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)
{
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 (DragTarget)
{
var newX = TrueCoords.x - GrabPoint.x;
var newY = TrueCoords.y - GrabPoint.y;
DragTarget.setAttributeNS(null, 'transform', 'translate(' + newX + ',' + newY + ')');
}
};
function Drop(evt)
{
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)
{
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' />
<circle id='BlueCircle' cx='25' cy='25' r='20' style='fill:blue; '/>
<circle id='RedCircle' cx='125' cy='25' r='20' style='fill:red; '/>
<circle id='OrangeCircle' cx='225' cy='25' r='20' style='fill:orange; '/>
<text id='DraggableText' x='20' y='200' style='fill:red; font-size:18px; font-weight:bold;'>Draggable Text</text>
<rect id='GreenRectangle' x='50' y='70' width='100' height='100' style='fill:green; '/>
<g id='Folder'>
<rect id='FolderRectangle' x='300' y='100' width='200' height='150' style='fill:tan; stroke:brown; stroke-width:3;'/>
</g>
</svg>
参见