本文记录了一段支持IE6的JS拖拽代码，重点探讨了在本地测试时遇到的一个交互细节问题：鼠标点击拖动时，浏览器光标会错误地变为文字选择状态。文章提供了相关HTML结构与JS调用示例，旨在帮助开发者解决拖拽功能中的光标显示异常，并提供了完整的代码参考与运行、复制及保存功能的实现方式。
IE6兼容性与光标问题
该功能在本地环境中已确认支持IE6浏览器，但存在一个交互细节问题：当用户点击鼠标进行拖拽操作时，光标会意外变为文字选择状态。目前尚不清楚如何彻底解决这一光标显示异常。在此记录相关实现代码：
代码结构与交互按钮
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简单拖拽扩展</title> <style type="text/css"> *{margin:0;padding:0;} #outwarp{ margin:20px auto; width:600px; height:600px; background:#fff; border:1px solid #333; position: relative; } .controlBox{ width:200px; height:200px; position: absolute; left:25px; top:50px; background:#ccc; font-size:12px; color:#fff; border: 1px solid #333;} .controlBar{cursor: move;} .controlBar h2{ font-size:12px; text-align: center; line-height: 25px; background: blue;} .innerCon{text-align: left; line-height: 20px;} .innerCon p{ padding: 10px; color: #000;} .resize{ position: absolute; height: 10px; width:10px; color: white; z-index: 10; background: red;} .lt{left:0;right:0; cursor:nw-resize;} .tr{right:0;top: 0;cursor:ne-resize;} .rb{right:0;bottom: 0; cursor:nw-resize;} .bl{left:0;bottom:0;cursor:ne-resize;} </style> </head> <body> <div id="outwarp"> <div class="controlBox"> <div class="resize lt"></div> <div class="resize tr"></div> <div class="resize rb"></div> <div class="resize bl"></div> <div class="controlBar"> <h2>按此处拖动</h2> </div> <div class="innerCon"> <p>中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间 内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容 中间内容中间内容中间内容中间内容中间内容中间内容</p> </div> </div> </div> </body> </html> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]