右鍵拖拽？
[英]Right Click Drag?
問題描述
有沒有辦法讓我的網站通過右鍵單擊按鈕拖動 DOM 元素？ 根據此MDN 參考， drag事件具有buttons屬性，左鍵單擊為 1，右鍵單擊為 2，兩者均為 3。 所以我寫了一些非常簡單的測試：
data:text/html, <div id="draggable" draggable="true" ondrag="console.log(event.buttons)" oncontextmenu="return false">Drag This</div>
當我用左鍵拖動這個 div 時，它會在控制台上打印 1（重復，因為在拖動過程中ondrag事件不斷觸發）。 當我嘗試使用右鍵拖動它時，沒有任何反應 - 我無法拖動它。 當我開始用左鍵拖動它，然后按住左鍵和右鍵時，它會打印 3。如果我這樣做然后松開左鍵並只按住右鍵，拖動會立即結束。
有沒有辦法允許使用鼠標右鍵拖動元素？
（如果重要的話，我正在使用最新的 Chrome 穩定版。）
1 個解決方案
解決方案1
2 2019-11-28 06:47:17
我正在使用此代碼並為我工作。
這在左右都點擊拖動div。
dragDiv.onmousedown = function(e) { var shiftX = e.clientX - dragDiv.getBoundingClientRect().left; var shiftY = e.clientY - dragDiv.getBoundingClientRect().top; dragDiv.style.position = 'absolute'; dragDiv.style.zIndex = 1000; document.body.append(dragDiv); moveDiv(e.pageX, e.pageY); function moveDiv(pageX, pageY) { dragDiv.style.left = pageX - shiftX + 'px'; dragDiv.style.top = pageY - shiftY + 'px'; } function onMouseMoveDiv(e) { moveDiv(e.pageX, e.pageY); } document.addEventListener('mousemove', onMouseMoveDiv); dragDiv.onmouseup = function() { document.removeEventListener('mousemove', onMouseMoveDiv); dragDiv.onmouseup = null; }; }; dragDiv.ondragstart = function() { return false; };
body { padding:10px; } #dragDiv { height:15px; width:15px; border:15px solid black; background:blue; }
<html> <head> <title>Drag Div using Right or Left Mouse Click.</title> </head> <body> <p>Drag Div using Right or Left Mouse Click.</p> <div id="dragDiv"></div> </body> </html>
谷歌風格右鍵單擊並拖動
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.