javascript如何实现div模块用鼠标拖动实例代码详解
document.all[]是文档中所有标签组成的一个数组变量，包括了文档对象中所有元素；
event.button的值：0没按键 1按左键 2按右键 3按左和右键 4按中间键 5按左和中间键 6按右和中间键 7按所有的键
下面是实现代码，模仿window，并且让它可以盖住select
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>测试可动p</title>
<script language='javascript' type='text/javascript'>
var offset_x;
var offset_y;
function Milan_StartMove(oEvent,p_id)
{
var whichButton;
if(document.all&&oEvent.button==1) whichButton=true;
else { if(oEvent.button==0)whichButton=true;}
if(whichButton)
{
var op=p_id;
offset_x=parseInt(oEvent.clientX-op.offsetLeft);
offset_y=parseInt(oEvent.clientY-op.offsetTop);
document.documentElement.onmousemove=function(mEvent)
{
var eEvent;
if(document.all) eEvent=event;
else{eEvent=mEvent;}
var op=p_id;
var x=eEvent.clientX-offset_x;
var y=eEvent.clientY-offset_y;
op.style.left=(x)+"px";
op.style.top=(y)+"px";
var d_op=document.getElementById("disable_"+op.id);
d_op.style.left=(x)+"px";
d_op.style.top=(y)+"px";
}
}
}
function Milan_StopMove(oEvent){document.documentElement.onmousemove=null; }
function p_Close(o)
{var op=o; op.style.display="none";var d_op=document.getElementById("disable_"+o.id);d_op.style.display="none";}
</script>
</head>
<body>
<p id="op" style="position:absolute;width:100px;height:60px;border:1px solid silver;left:100px;top:100px;z-index:9999;">
<p id="move" onmousedown="Milan_StartMove(event,this.parentNode)" onmouseup="Milan_StopMove(event)"
style="cursor:move;width:100%;height:15px;background-color:#0066cc; font-size:10px;">
<p onclick="p_Close(this.parentNode.parentNode)" style="float:right; width:10px; height:100%; cursor:hand; background-color:#cc3333; color:White;font-size:15px;">X</p>
</p>
<span>测试一下</span>
</p>
<p id="disable_op" style="position:absolute;left:100px;top:100px;width:100px; height:60px; z-index:9998;FILTER:alpha(opacity=50);";>
<iframe src="about:blank" name="hiddenIframe" width="100%" frameborder="0" height="60px" title="遮盖层"></iframe></p>
<select name="ListHead1$DropDownList3" id="ListHead1_DropDownList3">
<option selected="selected" value=""></option>
<option value="2">3333</option>
<option value="6">1111</option>
<option value="B">222</option>
</select>
</body>
</html>现在这个可拖动的p是不是好很多了？不用担心select了。之前放出来的只能在IE下正常工作，主要是用了parentElement,现在把它换成parentNode,调整了CSS样式，这样在FF下也能正常运行了。
以上是javascript如何实现div模块用鼠标拖动实例代码详解的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
7658
15
1393
52
91
11
73
19
38
113
Win11怎么禁用任务栏缩略图预览? 关闭鼠标移动任务栏图标显示缩略图技巧
Feb 29, 2024 pm 03:20 PM
本文将介绍如何在Win11系统中关闭鼠标移动任务栏图标时显示的缩略图功能。这一功能在默认情况下是开启的，当用户将鼠标指针悬停在任务栏上的应用程序图标上时，会显示该应用程序的当前窗口缩略图。然而，有些用户可能觉得这个功能不太实用或者会干扰到他们的使用体验，因此想要关闭它。任务栏缩略图可能很有趣，但它们也可能分散注意力或烦人。考虑到您将鼠标悬停在该区域的频率，您可能无意中关闭了重要窗口几次。另一个缺点是它使用更多的系统资源，因此，如果您一直在寻找一种提高资源效率的方法，我们将向您展示如何禁用它。不过
雷蛇 | 宝可梦耿鬼款无线鼠标、鼠标垫上架，套装价 1549 元
Jul 19, 2024 am 04:17 AM
本站7月12日消息，雷蛇今日宣布推出雷蛇|宝可梦耿鬼款无线鼠标、鼠标垫。其单品定价分别为1299元和299元，包含两款产品的套装价则为1549元。这并非雷蛇首次推出耿鬼联名的外设产品，2023年雷蛇就推出过耿鬼款的八岐大蛇V2游戏鼠标。此次推出两款新品整体均采用与鬼斯、鬼斯通、耿鬼家族外观类似的深紫色底色，印有这三只宝可梦和精灵球的线条轮廓，中间则为耿鬼这一经典幽灵属性宝可梦的彩色大图。本站发现，雷蛇|宝可梦耿鬼款无线鼠标基于此前发布的毒蝰V3专业版打造。其整体重量为55g，搭载雷蛇第二代FOC
惠普推出 Professor 1 三模轻音鼠标：4000DPI、蓝影 RAW3220，首发价 99 元
Apr 01, 2024 am 09:11 AM
本站3月31日消息，惠普近日在京东上架了一款Professor1三模蓝牙鼠标，可选黑白奶茶色，首发价99元，需要支付10元定金。据介绍，这款鼠标重量106克，采用人体工程学设计，尺寸为127.02x79.59x51.15mm，可选七档4000DPI，搭载蓝影RAW3220传感器，使用650毫安时电池，号称一次充电续航可以使用2个月。本站附鼠标参数信息如下：
VGN 联名《艾尔登法环》键鼠系列产品上架：菈妮 / 褪色者定制主题，首发 99 元起
Aug 12, 2024 pm 10:45 PM
本站8月12日消息，VGN于8月6日推出了联名《艾尔登法环》键鼠系列产品，包含键盘、鼠标和鼠标垫，采用菈妮/褪色者定制主题设计，目前系列产品已上架京东，售价99元起。本站附联名新品信息如下：VGN丨艾尔登法环S99PRO键盘该键盘采用纯铝合金外壳，辅以五层消音结构，使用GASKET板簧结构，拥有单键开槽PCB、原厂高度PBT材质键帽、铝合金个性化背板；支持三模连接和SMARTSPEEDX低延迟技术；接入VHUB，可一站式管理多款设备，首发549元。VGN丨艾尔登法环F1PROMAX无线鼠标该鼠标
Microsoft Word无法使用鼠标选择或突出显示文本
Feb 20, 2024 am 09:54 AM
这篇文章探讨了在MicrosoftWord中鼠标无法选择或突出显示文本时可能出现的问题，以及如何解决这些问题。为什么我无法在MicrosoftWord中选择文本？在MSWord中无法选择文本可能受多种原因影响，如权限限制、文档受保护、鼠标驱动问题或文件损坏。以下将提供解决这些问题的方法。修复MicrosoftWord无法使用鼠标选择或突出显示文本如果MicrosoftWord无法使用鼠标选择或突出显示文本，请遵循下面提到的解决方案：确保您的鼠标左键正在工作检查您是否有资格更改该文件更新鼠标的驱动
雷蛇鼠标驱动在哪个文件夹
Mar 02, 2024 pm 01:28 PM
很多用户不知道自己雷蛇驱动安装的文件去了哪里，这些驱动文件一般都是安装在了系统盘，也就是电脑的C盘，具体位置在programfiles下的RAZE文件夹。雷蛇鼠标驱动在哪个文件夹答：在系统C盘的programfiles下的RAZE文件夹。一般驱动都会安装在C盘，按照位置去找就可以了。雷蛇鼠标驱动安装方法介绍1、下载好官网的文件以后双击运行自己下载的EXE文件。2、等待软件加载。3、在这里可以选择你要安装的哪个驱动。4、选择好以后点击右下角的“安装”就可以了。
推荐：优秀JS开源人脸检测识别项目
Apr 03, 2024 am 11:55 AM
人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计
鼠标cpi是什么意思
Feb 12, 2024 pm 09:40 PM
CPI又叫做countperinch，鼠标中的CPI就是鼠标的灵敏度的高低，在使用的时候CPI数字越高说明鼠标越灵敏，现在小编在本篇文章中给大家带来了鼠标cpi按钮功能介绍。cpi含义x和y轴含义左键变成右键滚轮上下失灵灵敏度怎么调鼠标不动恢复鼠标cpi是什么意思答案：动态移动中每英寸反馈回来的坐标点数，就是鼠标的灵敏度的高低。按钮功能介绍：1、调节鼠标的移动速度按键;2、通过按cpi键调节鼠标灵敏度;3、衡量鼠标灵敏度的动态指标;4、可对CPI在500/1000CPI之间自由调节;
