微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

可以用鼠标拖动的DIV实现思路及代码_javascript技巧

php中文网
发布： 2016-05-16 17:19:28
原创
1091人浏览过
复制代码 代码如下:


测试可动div




style="cursor:move;position:absolute;width:100px;height:60px;border:1px solid

silver;left:100px;top:100px;z-index:9999;">



document.all[]是文档中所有标签组成的一个数组变量，包括了文档对象中所有元素；
event.button的值：0没按键 1按左键 2按右键 3按左和右键 4按中间键 5按左和中间键 6按右和中间键 7按所有的键

下面对此代码进行改进，模仿window，并且让它可以盖住select
复制代码 代码如下:




测试可动div




style="cursor:move;width:100%;height:15px;background-color:#0066cc; font-size:10px;">
X


测试一下







现在这个可拖动的div是不是好很多了？不用担心select了。之前放出来的只能在IE下正常工作，主要是用了parentElement,现在我把它换成parentNode,调整了CSS样式，这样在FF下也能正常运行了。

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：用Js实现的动态增加表格示例自己写的_javascript技巧 下一篇：js数组的基本用法及数组根据下标(数值或字符)移除元素_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
JavaScript代码分割_懒加载实现方案 使用动态import()和Webpack实现代码分割与懒加载，通过按需加载模块、路由级拆分及预加载优化，显著提升应用性能。
2025-11-28 08:34:47
186
语音识别合成_javascript语音交互 网页端语音识别与合成主要通过WebSpeechAPI实现，包含SpeechRecognition（语音转文字）和SpeechSynthesis（文字转语音）。首先创建SpeechRecognition实例并设置语言、监听onresult事件获取语音识别结果，调用start()开始识别；再通过SpeechSynthesisUtterance设置朗读内容及语速、音调等参数，调用speak()播放语音。两者结合可实现“你说一句，网页回一句”的交互效果，适用于语音助手、无障碍功能等场景。需注意仅支持HT
2025-11-28 06:35:10
262
前端测试框架_javascript单元测试 Jest、Mocha、Vitest和Karma是主流JavaScript测试框架，Jest因其易用性和强大功能成为React项目首选；通过编写简单加法函数测试示例，展示了测试用例的基本结构；针对异步代码和API请求，可使用jest.mock和jest.fn实现模拟；结合覆盖率报告与CI/CD持续集成，提升代码质量与项目稳定性。
2025-11-27 19:53:12
850
现代JavaScript_装饰器元数据 JavaScript装饰器（Stage3）通过@语法增强类成员功能，结合reflect-metadata可实现元数据存储与依赖注入。示例包括log装饰器记录方法调用，Required标记必填属性，Injectable与Inject实现DI容器解析，需配置tsconfig启用experimentalDecorators和emitDecoratorMetadata。
2025-11-27 19:53:02
634
JavaScript函数组合_柯里化与管道操作符技巧 函数组合结合柯里化与管道操作符可提升代码可读性与复用性。1.柯里化将多参函数转化为单参函数链，支持部分应用；2.pipe函数实现从左到右的函数组合，构建清晰的数据处理流程；3.实际应用中，通过定义trim、toUpperCase、addPrefix等柯里化函数，并用pipe组合，可优雅实现文本处理逻辑；4.实验性管道操作符（|>）语法更简洁，类似Unix管道，但需Babel支持。掌握这些技术能让JavaScript函数式编程更优雅。
2025-11-27 19:49:19
728
JavaScript构建工具_Webpack与Vite配置深度优化 Webpack适合复杂项目，通过优化loader、缓存和代码分割提升性能；Vite利用ESM实现极速开发体验，配置简洁，默认集成佳，新项目首选。
2025-11-27 19:48:06
328
JavaScript事件代理_事件冒泡机制 事件冒泡是事件从目标元素逐级向上传播至根节点的过程，事件代理利用此机制将事件绑定到父元素，通过判断event.target实现子元素事件处理，减少内存占用并支持动态元素。
2025-11-27 19:47:02
666
JavaScript静态站点_Gatsby.js构建博客系统 选择Gatsby.js因性能优异、数据灵活和现代化开发体验，它基于React和GraphQL，通过静态生成提升加载速度与SEO；使用gatsbynew创建项目，添加Markdown文章并配置frontmatter，自定义布局与插件扩展功能，最后执行gatsbybuild部署至Netlify等平台完成发布。
2025-11-27 19:45:34
857
JavaScript元编程_Proxy与Reflect高级应用技巧 Proxy与Reflect配合可实现对象操作的拦截与默认行为调用，用于构建响应式系统、私有属性模拟和函数装饰器等场景，提升代码灵活性与可维护性。
2025-11-27 19:44:02
432
JavaScript打包优化_代码分割与懒加载策略 代码分割与懒加载通过拆分bundle并按需加载，降低首屏体积。1.使用SplitChunksPlugin提取公共模块；2.路由级懒加载实现SPA按需加载；3.条件性加载低频功能模块；4.结合预加载与预获取优化体验，合理控制拆分粒度以提升性能。
2025-11-27 19:43:02
643
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部