我有一個可拖動的 div，其中包含一個嵌入式 SVG 影像，如下所示：
<div draggable="true">
<svg width="160" height="40" xmlns="http://www.w3.org/2000/svg">
<g>
<text x="26.5" y="15" style="font-size: 20px;">Drag me</text>
</g>
</svg>
</div>
我可以拖動 div，我可以執行 Alt Drag，但是當我執行 Shift Drag 時沒有任何反應，顯然根本沒有呼叫拖動開始事件。如何使 Shift Drag 起作用？
請注意這里提到的錯誤：Draggable with shift key doesn't work in Chrome似乎已在最新版本的 Chrome 中修復，而我提到的問題仍然存在。
uj5u.com熱心網友回復：
這是 Chromium 中的一個已知錯誤，Firefox 作業正常
https://bugs.chromium.org/p/chromium/issues/detail?id=982219
Shift-Drag如果元素有節點，則不能開始操作，而不是文本如果一鍵開始拖動，可以在拖動程序中添加
shiftkey如果您
Textnode先單擊“根”，則可以 使用 shift 鍵向下拖動
（單擊 SO 代碼段中以下專案中的“標簽”一詞）
如果拖動 SVG 是您的目標，請閱讀：https ://www.petercollingridge.co.uk/tutorials/svg/interactive/dragging/
<script>
function initDrag(tag, html = 'No HTML content') {
document.body.appendChild(Object.assign(document.createElement(tag),{
innerHTML : `tag:${tag} ` html,
ondrag : evt => LOG.innerHTML = `Shift ${evt.shiftKey?"On":"Off"} `
})).setAttribute("draggable", "true");
}
let htmlContent = `<b style="color:red;font-size:20px">with HTML content</b>`;
initDrag("h3");
initDrag("h3", htmlContent);
initDrag("div");
initDrag("div", htmlContent);
</script>
<h2 id="LOG" style="background:lightgreen">[shift key state]</h2>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/482073.html
標籤：javascript svg 拖放
下一篇：svg中的多個矩形？