做一个在线图片浏览的网页，因为鼠标左右键都被占用了，想用js实现类似于AutoCAD那种用鼠标中键就可拖放图片的功能，找了很久都没找到相关方面的资料，这个应该怎样实现?
走同样的路，发现不同的人生
鼠标移上去的时候判断是否点击了鼠标中键，然后再进行拖拽事件不知道是不是这样？
每一个鼠标事件event对象都有一个button属性，通过button属性指定是哪个键按下
<!DOCTYPE html> <html> <head> <style type="text/css"> #box{position:absolute; left:100px; top:100px; padding:5px; background:#f0f3f9; font-size:12px; -moz-box-shadow:2px 2px 4px #666666; -webkit-box-shadow:2px 2px 4px #666666;} #main{border:1px solid #a0b3d6; background:white;} #bar{line-height:24px; background:#beceeb; border-bottom:1px solid #a0b3d6; padding-left:5px; cursor:move;} #content{width:420px; height:250px; padding:10px 5px;} </style> <script> var params = { left: 0, top: 0, currentX: 0, currentY: 0, flag: false }; var getCss = function(o,key){ return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key]; }; var startDrag = function(bar, target, callback){ if(getCss(target, "left") !== "auto"){ params.left = getCss(target, "left"); } if(getCss(target, "top") !== "auto"){ params.top = getCss(target, "top"); } bar.onmousedown = function(event){ params.flag = true; if(!event){ event = window.event; bar.onselectstart = function(){ return false; } } var e = event; params.currentX = e.clientX; params.currentY = e.clientY; }; document.onmouseup = function(){ params.flag = false; if(getCss(target, "left") !== "auto"){ params.left = getCss(target, "left"); } if(getCss(target, "top") !== "auto"){ params.top = getCss(target, "top"); } }; document.onmousemove = function(event){ var e = event ? event: window.event; if(params.flag){ var nowX = e.clientX, nowY = e.clientY; var disX = nowX - params.currentX, disY = nowY - params.currentY; target.style.left = parseInt(params.left) + disX + "px"; target.style.top = parseInt(params.top) + disY + "px"; } if (typeof callback == "function") { callback(parseInt(params.left) + disX, parseInt(params.top) + disY); } } }; </script> </head> <body> <p id="box"> <p id="main"> <p id="bar">拖拽我吧～</p> <p id="content">乖～</p> </p> </p> <script> var oBox = document.getElementById("box"); var oBar = document.getElementById("bar"); startDrag(oBar, oBox); </script> </body> </html>
我给你一个Demo。
说一下我的想法，希望能提供一些思路。
拖拽的过程无非是 鼠标按键按下->鼠标移动->鼠标按键释放 三个步骤，只要分别监听这三个事件并记录一些数据就行了。
鼠标按键按下
鼠标移动
鼠标按键释放
我们把所有事件委托到window 对象上，并假定有一个全局变量 var Store = {};。
window
var Store = {};
一、当鼠标按下时 （window.onmousedown 事件）：
window.onmousedown
通过 event.target 来判断当前被按住的元素是否可以被拖拽，如果是执行第2步，否则直接返回。
event.target
保存当前被按住的元素的原始位置 Store.originalTop = ?, Store.originalLeft = ? （被按住的元素的 style.position 应该为 absolute）
Store.originalTop = ?
Store.originalLeft = ?
style.position
absolute
通过 event 对象获取按下时鼠标所在的位置 event.pageX, event.pageY， ... 也可以取一些其他你感兴趣的值。把取到的值保存在Store中。
event
event.pageX
event.pageY
...
Store
设置拖拽标志为真 Store.isDragging = true。
Store.isDragging = true
二、当鼠标移动时（window.onmousemove 事件）:
window.onmousemove
判断 Store.isDragging === true 是否成立，如果成立，执行第2步，否则直接返回。
Store.isDragging === true
通过 event.pageX, event.pageY， ...，获取当前鼠标位置。 把得到的值与之前保存在 Store 中的相减，以确定鼠标分别在 x,y方向上的偏移量，然后通过得到的偏移量和之前保存在Store 中的 originalTop 和 originalLeft 来更新被拖拽的元素的位置。
x
y
偏移量
originalTop
originalLeft
三、当鼠标释放时（window.onmouseup 事件）:
window.onmouseup
设拖拽标志为假 Store.isDragging = false.
Store.isDragging = false
这个问题很简单，你需要去买一个雷蛇或者低端一点的国产鼠标（带宏设置的）安装好驱动，将鼠标中间宏定义为鼠标左键，然后中间和左键的功能也就是一样的了。这样你就可以使用楼上的方法来实现这样的功能。不行你捅了我。。
html5不是有现成的拖拽功能吗?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
鼠标移上去的时候判断是否点击了鼠标中键，然后再进行拖拽事件
不知道是不是这样？
每一个鼠标事件event对象都有一个button属性，通过button属性指定是哪个键按下
我给你一个Demo。
说一下我的想法，希望能提供一些思路。
拖拽的过程无非是
鼠标按键按下->鼠标移动->鼠标按键释放三个步骤，只要分别监听这三个事件并记录一些数据就行了。我们把所有事件委托到
window对象上，并假定有一个全局变量var Store = {};。一、当鼠标按下时 （
window.onmousedown事件）：通过
event.target来判断当前被按住的元素是否可以被拖拽，如果是执行第2步，否则直接返回。保存当前被按住的元素的原始位置
Store.originalTop = ?,Store.originalLeft = ?（被按住的元素的style.position应该为absolute）通过
event对象获取按下时鼠标所在的位置event.pageX,event.pageY，...也可以取一些其他你感兴趣的值。把取到的值保存在Store中。设置拖拽标志为真
Store.isDragging = true。二、当鼠标移动时（
window.onmousemove事件）:判断
Store.isDragging === true是否成立，如果成立，执行第2步，否则直接返回。通过
event.pageX,event.pageY，...，获取当前鼠标位置。 把得到的值与之前保存在Store中的相减，以确定鼠标分别在x,y方向上的偏移量，然后通过得到的偏移量和之前保存在Store中的originalTop和originalLeft来更新被拖拽的元素的位置。三、当鼠标释放时（
window.onmouseup事件）:设拖拽标志为假
Store.isDragging = false.这个问题很简单，你需要去买一个雷蛇或者低端一点的国产鼠标（带宏设置的）安装好驱动，将鼠标中间宏定义为鼠标左键，然后中间和左键的功能也就是一样的了。
这样你就可以使用楼上的方法来实现这样的功能。
不行你捅了我。。
html5不是有现成的拖拽功能吗?