我需要一个特定的 Javascript 问题的帮助，我花了几个小时解决这个问题，现在卡住了。我也是 Javascript 新手，并且有 .NET 背景。
我的应用程序由编码在单独的 SVG 文件中的小部件组成，这些文件包含用于操作小部件（如旋转）的内联 JS 函数。我想将这些 SVG 小部件从库弹出窗口拖放到主页上。我希望小部件位于单独的文件中，以便最终用户可以根据需要添加或删除小部件文件。
SVG 小部件作为对象动态添加到主页 HTML 中，我可以让对象显示，并且可以与 SVG 中的 Javascript 交互。我还动态更改<g>包装 SVG 的 SVG 标记的 ID，以便我可以唯一标识页面上的小部件。
我想使用 HTML5 拖放功能，但是我不知道如何从传递给 dragstart 事件处理程序的事件对象中提取 SVG id 名称（因此我可以将对象 id 保存在 datatransfer 对象中之后使用）。我知道您不能将事件附加到对象标签，因此我<g>在 SVG 中的标签上使用 ID，并且可以在拖动 svg 对象时调用 dragstart 事件。有趣的是，如果我不动态添加 SVG，我可以从中提取<g>ID， event.currentTarget.parentWindow.gID.id但是当动态添加时，事件对象中的 gID 为空。
更奇怪的是，如果我在更改 SVG<g>标签的 ID 后添加警报，那么我可以从事件对象中获取 ID。所以一定有某种时间问题，但我不明白为什么，因为使脚本工作的警报是在我更改 SVG 的 ID之前<g>。我还在 SVG 上使用了一个加载事件，以确保在设置属性之前正确加载 SVG。
代码：
var svgDialObj
var svgDialDoc
var svgDialWin
window.onload = function () { // Startup function after DOM is loaded
var object2 = document.createElement("object");
object2.type = "image/svg+xml";
object2.data = "dial.svg"
object2.className = "widget"
object2.id = "svgDial1";
object2.draggable = "true"
document.getElementById('container').appendChild(object2);
svgDialObj = document.getElementById("svgDial1");
svgDialObj.addEventListener("load", function () { // access properties once the file is loaded
svgDialDoc = svgDialObj.contentDocument;
var oldDialID = svgDialDoc.getElementById("svgDial");
alert(oldDialID.id); // EVENT OBJECT ONLY WORKS IF THIS ALERT IS INSERTED HERE
oldDialID.setAttribute("id", "svgDial1");
svgDialWin = svgDialDoc.defaultView;
svgDialDoc.addEventListener('dragstart', drag_start, false);
}, false);
}
function drag_start(event) {
alert(event.currentTarget.parentWindow.gID.id); // fails with null if I don't use the alert before setting the event handler
event.dataTransfer.setData("text", event.currentTarget.parentWindow.gID.id + ',' + event.clientX + ',' + event.clientY);
}
SVG
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" onload="startup(evt)">
<g id="svgDial" transform="">
<path id="seg1" fill="none" stroke="rgb(0, 134, 0)" d="M13.46,66.27 A40,40,0,0,1,10.1,52.79" stroke-width="20" />
<path id="seg2" fill="none" stroke="rgb(50, 134, 0)" d="M10.01,50.7 A40,40,0,0,1,12.18,36.98" stroke-width="20" />
<path id="seg3" fill="none" stroke="rgb(100, 134, 0)" d="M12.91,35.02 A40,40,0,0,1,20.27,23.23" stroke-width="20" />
<path id="seg4" fill="none" stroke="rgb(150, 134, 0)" d="M21.72,21.72 A40,40,0,0,1,33.1,13.75" stroke-width="20" />
<path id="seg5" fill="none" stroke="rgb(200, 134, 0)" d="M35.02,12.91 A40,40,0,0,1,48.6,10.02" stroke-width="20" />
<path id="seg6" fill="none" stroke="rgb(255, 134, 0)" d="M50.7,10.01 A40,40,0,0,1,64.33,12.66" stroke-width="20" />
<path id="seg7" fill="none" stroke="rgb(255, 100, 0)" d="M66.27,13.46 A40,40,0,0,1,77.79,21.23" stroke-width="20" />
<path id="seg8" fill="none" stroke="rgb(255, 70, 0)" d="M79.25,22.72 A40,40,0,0,1,86.82,34.37" stroke-width="20" />
<path id="seg9" fill="none" stroke="rgb(255, 35, 0)" d="M87.59,36.32 A40,40,0,0,1,90,50" stroke-width="20" />
<path id="seg10" fill="none" stroke="rgb(255, 0, 0)" d="M89.95,52.09 A40,40,0,0,1,86.82,65.63" stroke-width="20" />
<path id="needle" fill="rgb(100, 100, 100)" stroke="rgb(90, 90, 90)" stroke-width="2" d="M24.39,54.51 A26,26,0,1,1,27.48,63 l-20,4 Z" />
<text id="numVal" x="34" y="58" fill="rgb(255, 255, 255)" style="font-family: 'Segoe UI'; font-size: 24px; text-align: center">0.0</text>
</g>
<script>
<![CDATA[
...
//]]>
</script>
</svg>
问题：
我在这里遇到的时间错误是什么，如何避免它？
我还不太了解 DOM - 是
event.currentTarget.parentWindow.gID.id从事件中提取唯一标识符的正确方法吗？（我假设我不能从 HTML 对象中获取到 SVG）对象标记是使用 Javascript 包含外部 SVG 文件的最佳方式吗？
尽管 HTML5 拖放应该可以工作 - 我是否会更好地使用像 Jquery 这样的库来支持拖放，或者通过 mousedown / mouseup 事件处理程序实现手动拖放支持来实现这种情况？
我对 JavaScript 很陌生，所以如果我在代码中做了任何其他愚蠢的事情，请告诉我。