Question

我想在我的网站上有一个可拖动元素的拖放字段，其中一些从adobe illustrator导出并嵌入为img，一些用svg库创建，如svg.js，因为它们必须是可修改的。我正在寻找一种在同一领域内移动的方法。

我尝试在此svg.js生成的元素上使用网站http://interactjs.io/中的第一个示例代码（拖动）：

<body>
  <div id="drawing" class="draggable"></div> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.5.0/svg.js"></script>
  <script>
    var draw = SVG('drawing').size(400,400);
    draw.rect(130, 30).attr({'x': 30, 'y': 80, 'fill': 'black'});
  </script>
</body>

Interact.js可以很好地移动img元素，但不能移动svg.js生成的元素。我只能在y轴上移动矩形，并且矩形旁边的页面的整个右侧变得可拖动。

是否可以使用相同的js-library处理嵌入式和代码生成的svg？或者我应该使用两个库？最后，我需要场上元素的坐标。

Answer 1

下面是拖动svg元素的示例。它不需要库。它还处理在元素上实现拖放之前先前已转换的元素。您要拖动的每个svg元素只需要包含class =＆＃34; dragTarget＆＃34;。这可以添加到任何元素中。请尝试以下示例：

＆＃13;

<!DOCTYPE HTML>

<html>
<head>
  <title>Drag SVG</title>
</head>
<body>
 SVG Drag/Drop is also applied to previously transformed elements (see maroon rectangle).
<div style=background:gainsboro;width:300px;height:300px>
<svg id="mySVG" width="300" height="300"  onmousedown="startDrag(evt)" onmousemove="drag(evt)" onmouseup="endDrag()">
<circle style=cursor:move class="dragTarget" id="redCircle" cx="90" cy="80" r="30" fill="red" stroke="black" stroke-width="2" style="cursor:default" ></circle>
<circle style=cursor:move class="dragTarget" id="orangeCircle" cx="200" cy="200" r="20" fill="orange" stroke="black" stroke-width="2" ></circle>
<rect style=cursor:move transform="translate(100,100)scale(1.2,.8)" class="dragTarget" id="maroonRect" x="120" y="150" width="30" height="30" fill="maroon" stroke="black" stroke-width="2"></rect>
<rect style=cursor:move class="dragTarget" id="blueRect" x="40" y="60" width="30" height="15" fill="blue" stroke="black" stroke-width="2"></rect>
</svg>
</div>
<script>
var TransformRequestObj
var TransList
var DragTarget=null;
var Dragging = false;
var OffsetX = 0;
var OffsetY = 0;
//---mouse down over element---
function startDrag(evt)
{
	if(!Dragging) //---prevents dragging conflicts on other draggable elements---
	{
		if(evt.target.getAttribute("class")=="dragTarget")
		{
			DragTarget = evt.target;
			//---reference point to its respective viewport--
			var pnt = DragTarget.ownerSVGElement.createSVGPoint();
			pnt.x = evt.clientX;
			pnt.y = evt.clientY;
			//---elements transformed and/or in different(svg) viewports---
			var sCTM = DragTarget.getScreenCTM();
			var Pnt = pnt.matrixTransform(sCTM.inverse());

			TransformRequestObj = DragTarget.ownerSVGElement.createSVGTransform()
			//---attach new or existing transform to element, init its transform list---
			var myTransListAnim=DragTarget.transform
			TransList=myTransListAnim.baseVal

			OffsetX = Pnt.x
			OffsetY = Pnt.y

			Dragging=true;
		}
	}
}
//---mouse move---
function drag(evt)
{
	if(Dragging)
	{
		var pnt = DragTarget.ownerSVGElement.createSVGPoint();
		pnt.x = evt.clientX;
		pnt.y = evt.clientY;
		//---elements in different(svg) viewports, and/or transformed ---
		var sCTM = DragTarget.getScreenCTM();
		var Pnt = pnt.matrixTransform(sCTM.inverse());
		Pnt.x -= OffsetX;
		Pnt.y -= OffsetY;

		TransformRequestObj.setTranslate(Pnt.x,Pnt.y)
		TransList.appendItem(TransformRequestObj)
		TransList.consolidate()
	}
}
//--mouse up---
function endDrag()
{
	Dragging = false ;

}
</script>
</body>

</html>

＆＃13;

哪个svg-library与interact.js兼容？

1 个答案: