小编Rob*_*son的帖子

d3-drag 与 html 元素初始位置问题

在下面的代码片段中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)

javascript d3.js

4
推荐指数
1
解决办法
1644
查看次数

标签 统计

d3.js ×1

javascript ×1