在下面的代码片段中div
,当我第一次开始拖动 div 时,它会稍微向右跳动,这让我认为它会重新计算鼠标所在位置的初始起始位置,而不是添加到原始位置。
我尝试查找使用非 svg 元素的其他示例,但找不到任何示例,并且d3-drag 的文档没有说明无法正确拖动非 svg 元素,不确定我缺少什么。
这是代码:
var box = d3.select("body").append("div")
.attr("class", "box")
d3.select(".box").call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended))
function dragstarted(d) {
d3.select(this).raise().classed("active", true);
}
function dragged(d) {
console.log(d3.event.x)
d3.select(this)
.style("left", d3.event.x + "px")
.style("top", d3.event.y + "px")
}
function dragended(d, i) {
d3.select(this).classed("active", false);
}
Run Code Online (Sandbox Code Playgroud)
body {
padding-top: 25px;
margin: auto;
width: 600px;
}
div.box {
position: relative;
width: auto;
padding: 20px 20px 20px 20px;
margin: 5px 5px 5px 5px;
background: …
Run Code Online (Sandbox Code Playgroud)