1
拖放形狀拖放到錯誤的座標上。我非常接近使用translate轉換實現它，但有一些缺失。我該如何解決？基於鼠標座標拖動拖放線
檢查小提琴：http://plnkr.co/edit/FmWL4pACdw1haCLXsCZt?p=preview
代碼：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/standard.css">
<script src="scripts/jquery.js"></script>
<script src="scripts/d3.min.js"></script>
</head>
<body>
<div id="content">
<div style="position: relative; height: 100%;">
<div><a id="newConnector" title="Add new sequence/data/message flow" draggable="true" ondragstart=getId(this.id) ondragend="createShape(event)"><img src="images/sequence.png"></a></div>
</div>
<div id="canvas" tabindex="0">
<script>
var svg = d3.select('#canvas')
.append("svg")
.attr("width", 800)
.attr("height", 803);
var clientX, clientY, offsetX, offsetY;
var x, y;
var shapeId = "";
function getId(id)
{
shapeId = id;
console.log(shapeId);
}
function createShape(event)
{
var $stageContainer = $("#canvas");
var stageOffset = $stageContainer.offset();
clientX = event.clientX;
clientY = event.clientY;
offsetX = stageOffset.left;
offsetY = stageOffset.top;
x = clientX - offsetX;
y = clientY - offsetY;
console.log("x is: " + x + " " + "y is: " + y);
switch (shapeId)
{
case('newConnector'):
createLine(x, y);
break;
default:
console.log("Nothing to drag");
}
}
function createLine(x, y)
{
svg.append("path")
.attr("d", 'M 100 100 L 400 100 z')
.attr("transform", "translate(" + x + "," + y + ")")
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none")
.style('cursor', 'move')
.call(drag);
}
function getTranslate(t) {
var translate = d3.transform(t.getAttribute("transform")).translate;
return {
x: Number(translate[0]),
y: Number(translate[1])
};
}
var drag = d3.behavior.drag()
.origin(function()
{
return getTranslate(this);
})
.on("drag", move);
function move(d) {
var x = d3.event.x;
var y = d3.event.y;
d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
}
</script>
</div>
</div>
</div>
</body>
</html>