JavaScript
关于鼠标拖动和函数参数的问题。
墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网
我也要 关注 + 加入社区function drag(){
var oTitle=getByClass('login_logo_webqq','loginPanel')[0];
// 拖曳
oTitle.onmousedown=fnDown;// 问题在这
// 关闭
var oClose=document.getElementById('ui_boxyClose');
oClose.onclick=function(){
document.getElementById('loginPanel').style.display='none';
}
// 切换状态
var loginState=document.getElementById('loginState'),
stateList=document.getElementById('loginStatePanel'),
lis=stateList.getElementsByTagName('li'),
stateTxt=document.getElementById('login2qq_state_txt'),
loginStateShow=document.getElementById('loginStateShow');
loginState.onclick=function(e){
e = e || window.event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
}
stateList.style.display='block';
}
// 鼠标滑过、离开和点击状态列表时
for(var i=0,l=lis.length;i<l;i++){
lis[i].onmouseover=function(){
this.style.background='#567';
}
lis[i].onmouseout=function(){
this.style.background='#FFF';
}
lis[i].onclick=function(e){
e = e || window.event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
}
var id=this.id;
stateList.style.display='none';
stateTxt.innerHTML=getByClass('stateSelect_text',id)[0].innerHTML;
loginStateShow.className='';
loginStateShow.className='login-state-show '+id;
}
}
document.onclick=function(){
stateList.style.display='none';
}
}
function fnDown(event){
event = event || window.event;
var oDrag=document.getElementById('loginPanel'),
// 光标按下时光标和面板之间的距离
disX=event.clientX-oDrag.offsetLeft,
disY=event.clientY-oDrag.offsetTop;
// 移动
document.onmousemove=function(event){
event = event || window.event;
fnMove(event,disX,disY);
}
// 释放鼠标
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
}
function fnMove(e,posX,posY){
var oDrag=document.getElementById('loginPanel'),
l=e.clientX-posX,
t=e.clientY-posY,
winW=document.documentElement.clientWidth || document.body.clientWidth,
winH=document.documentElement.clientHeight || document.body.clientHeight,
maxW=winW-oDrag.offsetWidth-10,
maxH=winH-oDrag.offsetHeight;
if(l<0){
l=0;
}else if(l>maxW){
l=maxW;
}
if(t<0){
t=10;
}else if(t>maxH){
t=maxH;
}
oDrag.style.left=l+'px';
oDrag.style.top=t+'px';
}
...全文
相关推荐
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
在Vue.js中实现鼠标拖动功能，通常会利用`mousedown`、`mousemove`和`mouseup`这三种鼠标事件。
C++Builder中的拖动鼠标画图项目实践指南
C++Builder是Borland公司开发的一款强大的C++集成开发环境，它提供了丰富的可视化组件库(VCL)，以支持快速开发具有图形用户界面的应用程序。VCL框架是一种面向对象的类库，它包含了一系列封装好的组件和对象，极大地方便了程序员的工作。VCL框架基于组件的架构允许开发者通过拖放的方式设计界面，并通过事件驱动的方式实现程序的逻辑。此外，VCL具备高度的扩展性，开发者可以轻松添加自定义组件。相比传统的Windows API编程方式，使用VCL能够大幅度提高开发效率和降低代码复杂性。
OpenGL鼠标点选并拖动
这些函数会在鼠标按下、移动和释放时被调用，获取鼠标的坐标信息。对于鼠标拖动，我们需要跟踪鼠标按下和移动时的位置变化，以确定用户想要执行的操作。
ＱＴ_拖动鼠标画线_
在QT中实现拖动鼠标画线，主要涉及到QGraphicsView、QGraphicsScene和QGraphicsPathItem等类。1.
js 前端鼠标拖动事件实例
这是开始拖动操作的第一步，通常在这里会记录下鼠标按下时的位置，以便后续的`mousemove`事件可以知道元素应该移动的方向和距离。2.
