d3js behavior.drag 阻止可编辑内容？答案

【问题标题】：d3js behavior.drag prevents editable content?d3js behavior.drag 阻止可编辑内容？
【发布时间】：2017-09-28 19:56:22
【问题描述】：

我有一个小弹出编辑器，用于在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 设置为true。

【问题讨论】：

标签： javascript html d3.js drag

【解决方案1】：

点击和拖动之间存在冲突，这在 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>

【讨论】：

感谢您的回答。我怀疑这样的事情，并试图用谷歌搜索它......也许使用了错误的词。您能否提供有关单击/拖动冲突的信息的良好来源？
这是一个众所周知的问题。看看这里，例如：bl.ocks.org/mbostock/a84aeb78fea81e1ad806
谢谢 - 它在玩具示例中有效，但在我的应用程序中包含它时不起作用。原来我还需要设置on("mousedown.drag", null)。所以我想知道这个问题是否有通用的解决方案？