DOM中的新SVG元素,通过JavaScript添加,直到mouseup才会呈现

时间:2014-05-31 15:10:00

标签: javascript dom svg

纯JavaScript(没有JQuery,D3或其他外部库)。我正在拖动看起来像矩形列的SVG对象。它们在矩形之间有连接线,当我将一个矩形拖到另一个矩形上时,我从DOM中删除所有元素,检查列中的每个矩形是否对应于相邻列中的矩形,并在它们之间绘制一条新的连接线,如果条件是真的。在控制台中,我可以看到元素是立即创建的,但是在我释放鼠标并停止拖动之前它们不会被渲染。因为我可以拖动多个列并且需要在决定放置的位置之前比较每个位置的结果,我需要强制新元素不仅要立即创建,而且要立即渲染,而不是被阻止直到我释放鼠标。

[编辑:为了回应“未展示研究”,请注意以下(原始)段落。尝试了我能找到的所有建议,明确地提到了最常见的建议。也许我的研究方法并不复杂;你可以建议我下次能做得更好吗?]

根据本网站和其他地方的建议,我尝试添加和删除DOM中的元素并切换各种元素的显示属性,但没有成功。

示例文件位于https://github.com/obdurodon/drag。要在浏览器中运行,克隆然后打开textual_correspondence_static_sample / test.xhtml(从文件系统中,以便它可以找到与其链接的CSS和JavaScript文件)。抓住列顶部的拖动图标并向左或向右拉。连接线仅在掉落时重新绘制,但我需要它们在每次穿越后立即重新绘制(我会担心稍后会在鼠标上拉伸它们)。

1 个答案:

答案 0 :(得分:0)

我认为原因是因为你在endMove()中(在drawLines()调用之后)给线条描边颜色。但是你没有在swapColumns()函数中这样做。 SVG中的新元素默认没有笔划。

相关问题