dcx = e.clientX;
dcy = e.clientY;
delt = e.target;
- dox = parseFloat(delt.getAttributeNS(null,"cx"));
- doy = parseFloat(delt.getAttributeNS(null,"cy"));
+ dox = parseFloat(delt.getAttributeNS(null,"x"));
+ doy = parseFloat(delt.getAttributeNS(null,"y"));
dragging = false;
window.addEventListener('mousemove', drag_mousemove, true);
window.addEventListener('mouseup', drag_mouseup, true);
if (dragging) {
var x = dox + ddx;
var y = doy + ddy;
- delt.setAttributeNS(null, "cx", x);
- delt.setAttributeNS(null, "cy", y);
+ delt.setAttributeNS(null, "x", x);
+ delt.setAttributeNS(null, "y", y);
console.log(delt);
}
}
<title>T</title>
</head>
<body>
-<div id="status">nothing</div>
-<p>
- <svg id="space"
- xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200"
- ondragstart="test_dragstart(event)"
- >
+ <p>
+ <div id="status">nothing</div>
+ </p>
+ <svg id="space"
+ xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200"
+ >
<rect fill="green" x="42" y="56" width="100" height="80"/>
- <circle
- draggable="true"
- onmousedown="drag_mousedown(event)"
- data-objid="42"
- fill="red" cx="50" cy="80" r="10"/>
+ <use href="#piece42"
+ x="50" y="80"
+ onmousedown="drag_mousedown(event)"
+ />
+ <defs>
+ <circle
+ id="piece42"
+ cx="0" cy="0"
+ fill="red" r="10"/>
+ </defs>
</svg>
-<script src="script.js"></script>
+ <script src="script.js"></script>
</body>
</html>