alt*_*urt 6 javascript drag-and-drop d3.js
Jsfiddle:http://jsfiddle.net/6NBy2/
码:
var in_editor_drag = d3.behavior.drag()
.origin(function() {
var g = this.parentNode;
return {x: d3.transform(g.getAttribute("transform")).translate[0],
y: d3.transform(g.getAttribute("transform")).translate[1]};
})
.on("drag", function(d,i) {
g = this.parentNode;
translate = d3.transform(g.getAttribute("transform")).translate;
x = d3.event.dx + translate[0],
y = d3.event.dy + translate[1];
d3.select(g).attr("transform", "translate(" + x + "," + y + ")");
d3.event.sourceEvent.stopPropagation();
});
svg = d3.select("svg");
d = {x: 20, y: 20 };
groups = svg
.append("g")
.attr("transform", "translate(20, 20)");
groups
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", 100)
.attr("height", 100)
.style("fill", "green")
.call(in_editor_drag)
.style("opacity", 0.4);
我试图通过使用其中一个孩子作为句柄来拖动一个组.简单地说,我正在尝试做的是,当拖动群组孩子时:
当孩子被拖动时,组不会按预期移动.它移动的距离小于拖动的距离,它开始在这里和那里跳跃.
我在这做错了什么？
编辑:
更新了jsfiddle:http://jsfiddle.net/6NBy2/2/
我试图通过使用一个或多个子项作为拖动句柄来拖动整个组.
这是一个老问题，但没有真正回答。我遇到了完全相同的问题，只想通过一个孩子（不是 的所有子元素<g>）拖动该组。问题是，d3.event.dx/y相对于 的位置计算<g>。一旦<g>移动了.attr(“transform”, “translate(x, y)”)，d3.event.dx/dy就会调整为新的（较小的）值。这会导致约 . 光标速度的一半。我为此找到了两种可能的解决方案：
首先（最后我采用了这种方法）：
将拖动手柄 rect 直接附加到 svg 而不是<g>. 所以它相对于<svg>而不是相对于<g>. 然后在拖动功能中同时移动（the<rect>和 the <g>）。
var svg = d3.select("svg");
var group = svg
.append("g").attr("id", "group")
.attr("transform", "translate(0, 0)");
group
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", 100)
.attr("height", 100)
.style("fill", "green")
.style("opacity", 0.4);
group
.append("text")
.attr("x", 10)
.attr("y", 5)
.attr("dominant-baseline", "hanging")
.text("drag me");
handle = svg
.append("rect")
.data([{
// Position of the rectangle
x: 0,
y: 0
}])
.attr("class", "draghandle")
.attr("x", 0)
.attr("y", 0)
.attr("width", 100)
.attr("height", 20)
.style("fill", "blue")
.style("opacity", 0.4)
.attr("cursor", "move")
.call(d3.drag().on("drag", function (d) {
console.log("yep");
d.x += d3.event.dx;
d.y += d3.event.dy;
// Move handle rect
d3.select(this)
.attr("x", function (d) {
return d.x;
})
.attr("y", function (d) {
return d.y;
});
// Move Group
d3.select("#group").attr("transform", "translate(" + [d.x, d.y] + ")");
}));<body>
<svg width="400" height="400"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
</body>第二：
在拖动事件期间检查光标所在的元素，d3.event.sourceEvent.path[0]并仅<rect>在单击句柄时运行拖动功能。使用这种方法，所有元素都可以归<g>为一<rect>组（无需在组外添加额外元素）。这种方法的缺点是，如果在鼠标按下的情况下将光标移动到拖动手柄上，也会执行拖动。
var svg = d3.select("svg");
var group = svg
.append("g")
.data([{
// Position of the rectangle
x: 0,
y: 0
}])
.attr("id", "group")
.attr("transform", function (d) {
return "translate(" + d.x + ", " + d.y + ")"
})
.call(d3.drag().on("drag", function (d) {
if (d3.event.sourceEvent.target.classList.value === "draghandle") {
console.log("yep");
d.x += d3.event.dx;
d.y += d3.event.dy;
d3.select(this).attr("transform", function (d) {
return "translate(" + [d.x, d.y] + ")"
})
} else {
console.log("nope");
return;
}
}));
group
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", 100)
.attr("height", 100)
.style("fill", "green")
.style("opacity", 0.4);
group
.append("text")
.attr("x", 10)
.attr("y", 5)
.attr("dominant-baseline", "hanging")
.text("drag me");
handle = group
.append("rect")
.attr("class", "draghandle")
.attr("x", 0)
.attr("y", 0)
.attr("width", 100)
.attr("height", 20)
.style("fill", "blue")
.style("opacity", 0.4)
.attr("cursor", "move");<body>
<svg width="400" height="400"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
</body>| 归档时间： |
|
| 查看次数： |
1782 次 |
| 最近记录： |