个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我有一个小的弹出编辑器，用于在 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* 文本。但是，您无法编辑此内容。这两个元素都将 contenteditable 设置为 true。
最佳答案
点击和拖动之间存在冲突，这在 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>关于javascript - d3js Behaviour.drag 阻止可编辑内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46477316/
26
4
0
这个问题在这里已经有了答案: What is the rationale behind decltype behavior? (3 个答案) 关闭 5 年前。 int i = 12; decltyp
这个问题在这里已经有了答案: Undefined, unspecified and implementation-defined behavior (9 个回答) 关闭 4 年前。 C 标准 (AF
我提到了 This Question但没有答案对我有用。所以基本上我有一个 BottomNavigationView，它在向下滚动时隐藏并在向上滚动时显示。当我通过触摸滚动 Recycler View
我正在寻找一种利用mDNS，floodsub和kademlia DHT的网络行为。到目前为止，我已经使所有这些服务都可以使用，但是还不能将这些服务的响应用于有意义的事情。 理想情况下，我将能够将来自行
此代码适用于我的网站: $(function(){ $('.link-follow-stop').on('click', function(event){ console.lo
private synchronized Map calculateStanding() { System.out.println("Calculate standing for
我最近正在测试 的点击事件(点击后找到一个文本框)并发现了一些不寻常的东西。 在 HTML 标记中， 如果在里面, 上面的点击事件标签触发了两次 如果在之外，点击事件为按预期运行 为了更好地理解我要
我尝试了以下两种情况: void ssss(int b){ System.out.println ("int"+b); } void ssss(double b){ System.out.
由于截止日期的压力，我可能会忽略一些东西。但是这种行为令我惊讶。 好像游标缓存了100行，而continue语句刷新了缓存 并从获取新缓存的第一条记录开始。 我将其范围缩小到以下脚本: drop ta
我是德尔福的新手。在 TStrem 类的文档中，我读到它是一个抽象类。所以我认为当我尝试使用 创建它时编译器会出错 stream := TStream.Create(); 为什么不呢？ 最佳答案 De
在 Bjarne Stroustrup 的“C++ 之旅”(第二版)的第 18 页上，他指出“对于几乎所有类型，读取或写入未初始化变量的效果是未定义的”。 我明白为什么读取未初始化的变量是未定义的行为
我正在尝试使用两个线程的代码，一个线程递增共享长变量，另一个线程递减 var。 class Shared { private long a; public void incr() {
我们都听过这样的警告:如果您在 C 或 C++ 中调用未定义的行为，任何事情都可能发生。 这是否仅限于任何运行时行为，还是还包括任何编译时行为？特别是，编译器在遇到调用未定义行为的构造时是否允许拒绝代
我在 C++ 中编写了一个简单的函数来计算具有长度、宽度和高度的 Box 对象的体积。这是一个类的一部分，所以 l,b,h是私有(private)成员: long long CalculateVolu
我对以下声明有一些疑问: SELECT 1 FROM dual WHERE DECODE(1, 0, (SELECT COUNT(*) from tbl
我正在做一项作业，要求我编写一些 unix 的 ls 代码。我遇到问题的部分是 -R 选项。 一些背景:我使用的结构包含 2 个列表，一个用于文件，另一个用于运行 ls 时作为参数传递的目录。如果除了
我正在开发一个使用 Spring 数据 的 Java Spring 项目。 它使用 repositories 在狗被主人收集时从 Kennel Object 中移除 Dog Objects。 请注意，
我有一个 NSMutableArray，我分配给它: NSMutableArray *newElements = [[NSMutableArray alloc] initWithObjects:sel
我很少使用 Python，所以我不清楚为什么允许这样的行为:没有 w 对象，因此它没有 s 属性，那为什么 f 允许进行 w.s 赋值？ >>> def f(): w.s="ads" #al
我有一个网站，其中一些元素具有 position: fixed。它在桌面浏览器上看起来不错，但在我的手机(Xperia Arc，Android 2.3)上，这些元素会随着页面滚动，直到您从屏幕上松开手
我是一名优秀的程序员,十分优秀！