代码之家 › 专栏 › 技术社区 › Zane

d3js行为。拖动阻止可编辑内容?

drag d3.js html javascript

Zane · 技术社区 · 7 年前

d3js 应用由于这个编辑器有时会覆盖页面的有趣区域,我使用 behavior.drag

这很好用。。。我现在可以拖动弹出菜单了。但是我不能再编辑内容了。

谁知道这为什么不起作用,以及该怎么办?

这是我的一个小问题: https://jsfiddle.net/ey73b557/41/ 这是代码中的拖动行为:

// defined the drag behavior
var editTaskdrag = d3.behavior.drag()
        .on("drag", function(d,i) {
          var d3EditTaskObject = d3.select(this);
          d3EditTaskObject.style("left", addPx(d3EditTaskObject.style("left"), d3.event.dx)); 
          d3EditTaskObject.style("top", addPx(d3EditTaskObject.style("top"), d3.event.dy)); 
        })
          ;

您可以编辑 *edit me 文本点击蓝色按钮,弹出一个相同的窗口 *edit me* 文本但是,您无法编辑此项。这两个元素都具有 contenteditable

1 回复 | 直到 7 年前

Gerardo Furtado 7 年前

点击和拖动之间存在冲突,这在D3代码中是众所周知的。

在您的情况下,最简单的解决方案(当然不是最优雅的解决方案)就是在单击跨度时删除阻力行为:

.on("click", function(){
    popupEditor.on(".drag", null)
})

// this generates the 'editor' - used for both the static and the draggable version
function simpleEditor(d3Object) {
  d3Object.append("span")
    .text("content: ");
  d3Object.append("span")
    .text(" * edit me * ")
    .attr("contenteditable", "true")
    .style("border", "solid black 1pt")
    .style("background", "lightblue")
    .on("click", function() {
      popupEditor.on(".drag", null)
    })
    .on("mouseout", function() {
      popupEditor.call(editTaskdrag)
    })
}
// arithmetic on strings with px at the end: addPx("110px", 23) = "133px"
function addPx(s, d) {
  var number = parseInt(s, 10); // this really works even if the string is "120px"
  number += d;
  return number.toString() + "px";
}
// defined the drag behavior
var editTaskdrag = d3.behavior.drag()
  .on("drag", function(d, i) {
    var d3EditTaskObject = d3.select(this);
    d3EditTaskObject.style("left", addPx(d3EditTaskObject.style("left"), d3.event.dx));
    d3EditTaskObject.style("top", addPx(d3EditTaskObject.style("top"), d3.event.dy));
  });
// generate the static editor
simpleEditor(d3.select("#staticEditor"))
  // and now the draggable editor, hidden, but with drag behavior
var popupEditor = d3.select("#popupEditor");
simpleEditor(popupEditor);
popupEditor.attr("hidden", "true")
  .call(editTaskdrag);
// click this button to get the draggable popup. However, it is not editable anymore
d3.select("#button")
  .on("click", function() {
    d3.select("#popupEditor")
      .style("position", "fixed")
      .style("left", "30%")
      .style("top", "30%")
      .style("background", "grey")
      .style("padding", "1em")
      .style("box-shadow", "0.5em 0.5em lightgrey")
      .attr("hidden", null)
  })

#button {
  background-color: blue;
  color: white;
  border: solid black 1pt;
  padding: 0.2em;
  border-radius: 1em
}

<script src="https://d3js.org/d3.v3.min.js"></script>
<body>
  <p id="staticEditor">
  </p>
  <p id="popupEditor">
  </p>
  <p>
    <span id="button">
Click here to open the pop up editor
</span>
  </p>
</body>