どのsvg-libraryがinteract.jsと互換性がありますか？

-1

ドラッグ可能な要素を持つ私のウェブサイトにドラッグフィールド&をドロップしたいと思います。それらはadobeイラストレータからエクスポートされ、imgとして組み込まれています。いくつかはsvg.jsのようなsvgライブラリで作成されます。私は同じ分野で両方を動かす方法を探しています。どのsvg-libraryがinteract.jsと互換性がありますか？

Iは元素生成svg.jsこれにウェブサイトhttp://interactjs.io/から（ドラッグ）実施例1のコードを使用しようとした：

<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の両方で作業することはできますか？または、2つのライブラリを使用する必要がありますか？最後に、フィールド上の要素の座標が必要です。

出典

2017-03-22 KatiKiss

以下は、svg要素をドラッグする例です。ライブラリは必要ありません。また、ドラッグ＆ドロップが要素に実装される前に以前に変換された要素も処理します。ドラッグする各svg要素には、class = "dragTarget"を含める必要があります。これは任意の要素に追加できます。以下の例を試してみてください。

<!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) 
 
{ 
 
\t if(!Dragging) //---prevents dragging conflicts on other draggable elements--- 
 
\t { 
 
\t \t if(evt.target.getAttribute("class")=="dragTarget") 
 
\t \t { 
 
\t \t \t DragTarget = evt.target; 
 
\t \t \t //---reference point to its respective viewport-- 
 
\t \t \t var pnt = DragTarget.ownerSVGElement.createSVGPoint(); 
 
\t \t \t pnt.x = evt.clientX; 
 
\t \t \t pnt.y = evt.clientY; 
 
\t \t \t //---elements transformed and/or in different(svg) viewports--- 
 
\t \t \t var sCTM = DragTarget.getScreenCTM(); 
 
\t \t \t var Pnt = pnt.matrixTransform(sCTM.inverse()); 
 

 
\t \t \t TransformRequestObj = DragTarget.ownerSVGElement.createSVGTransform() 
 
\t \t \t //---attach new or existing transform to element, init its transform list--- 
 
\t \t \t var myTransListAnim=DragTarget.transform 
 
\t \t \t TransList=myTransListAnim.baseVal 
 

 
\t \t \t OffsetX = Pnt.x 
 
\t \t \t OffsetY = Pnt.y 
 

 
\t \t \t Dragging=true; 
 
\t \t } 
 
\t } 
 
} 
 
//---mouse move--- 
 
function drag(evt) 
 
{ 
 
\t if(Dragging) 
 
\t { 
 
\t \t var pnt = DragTarget.ownerSVGElement.createSVGPoint(); 
 
\t \t pnt.x = evt.clientX; 
 
\t \t pnt.y = evt.clientY; 
 
\t \t //---elements in different(svg) viewports, and/or transformed --- 
 
\t \t var sCTM = DragTarget.getScreenCTM(); 
 
\t \t var Pnt = pnt.matrixTransform(sCTM.inverse()); 
 
\t \t Pnt.x -= OffsetX; 
 
\t \t Pnt.y -= OffsetY; 
 

 
\t \t TransformRequestObj.setTranslate(Pnt.x,Pnt.y) 
 
\t \t TransList.appendItem(TransformRequestObj) 
 
\t \t TransList.consolidate() 
 
\t } 
 
} 
 
//--mouse up--- 
 
function endDrag() 
 
{ 
 
\t Dragging = false ; 
 

 
} 
 
</script> 
 
</body> 
 

 
</html>

出典

2017-03-22 15:41:17

私は間違いなくあなたのソリューションを見ているよ、あなたの答えをいただき、ありがとうございます。私は誤ってsvg.jsとinteract.jsの間の最初の問題の解決策を見つけました。すべてのhtml要素に幅と高さが定義されている必要があります。そうでなければinteract.jsで適切にドラッグできません。 – KatiKiss

どのsvg-libraryがinteract.jsと互換性がありますか？

答えて

関連する問題