用JS写一个弹出层，并且这个弹出层可以拖动
0
最佳答案
1
<!DOCTYPE html> <html> <head> <style type="text/css"> #win { width: 800px; height: 400px; border: 1px solid #000; background: #eee; position: absolute; z-index: 99; /* 可移动使用绝对定位, 弹出层置于顶层 */ } #tit { width: 800px; height: 50px; border-bottom: 1px solid #000; background: #08f; } </style> </head> <body> <div id="win"> <div id="tit"></div> </div> </body> <script type="text/javascript"> // 兼容 旧版 IE 写法不一, 且容易出错, 了解原理后可使用框架. // 实现思路. // 1.鼠标在 菜单条/窗体 上按下时: 记录坐标; 绑定 document 鼠标 移动/弹起 事件; // 2.鼠标移动时 计算坐标 设置 left, top; // 3.鼠标弹起时 移除 document 鼠标 移动/弹起 事件; // 绑定事件 function bind( htmlDocument, eventName, callback ) { if (htmlDocument.addEventListener) htmlDocument.addEventListener(eventName, callback, false); else htmlDocument.attachEvent('on' + eventName, callback); // 旧版 IE 浏览器 } // 移除事件 function unbind( htmlDocument, eventName, callback ) { if (htmlDocument.removeEventListener) htmlDocument.removeEventListener(eventName, callback, false); else htmlDocument.detachEvent('on' + eventName, callback); // 旧版 IE 浏览器 } // htmlDocument : 要移动的对象 相当于窗体 // targetDocument : 触发移动的对象 相当于菜单条 (鼠标点到菜单条上才能移动窗体) // 开始 function start( htmlDocument, targetDocument ) { // 如果不传 targetDocument 则使用 htmlDocument targetDocument = targetDocument || htmlDocument; // 鼠标坐标 var x, y; // 移动 var move = function() { // 移除框选的内容 (鼠标按下拖动往往是选择文本, 可以用CSS 控制 不能选中文本) window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); // 计算移动的坐标 // 这里还需限制其移动范围 (自己思考计算) 如: // 坐标不能是 负数, // 不能移出父级窗体外, var _x = event.clientX - x; var _y = event.clientY - y; // 设置 left, top // 如果只能横着移动 则忽略 left // 如果只能竖着移动 则忽略 top htmlDocument.style.left = _x + 'px'; htmlDocument.style.top = _y + 'px'; }; // 停止 var stop = function() { // 移除 鼠标移动事件 unbind(document, 'mousemove', move); // 移除 鼠标弹起事件 unbind(document, 'mouseup', stop); // 移除 鼠标移出浏览器事件 if (document.all) {// 旧版 IE 浏览器 unbind(document, 'losecapture', stop); document.releaseCapture(); // 与 setCapture 配对的.. } else { unbind(window, 'blur', stop); } }; // 绑定 鼠标按下事件 bind(targetDocument, 'mousedown', function () { // 鼠标按下时 记录当前鼠标位置 x = event.clientX - htmlDocument.offsetLeft; y = event.clientY - htmlDocument.offsetTop; // 绑定 鼠标移动事件 bind(document, 'mousemove', move); // 绑定鼠标弹起事件 bind(document, 'mouseup', stop); // 绑定鼠标移出浏览器事件 if (document.all) {// 旧版 IE 浏览器 bind(document, 'losecapture', stop); document.setCapture(); // IE 捕获 窗体外的鼠标 } else { bind(window, 'blur', stop); event.preventDefault(); // 阻止事件 } }) } // 使用 start(document.getElementById('win'), document.getElementById('tit')); </script> </html>
奖励园豆：5
花费我1小时.. 如今还想了解原理的人不多了.
@过于执著: 牛！！
@过于执著: 非常感谢您花费宝贵的时间来解决我的问题！在此向您致以最真诚的感谢！
@过于执著: 虽然我知道原理 但是一个小时就搞定了 你也太厉害了
其他回答(3)
0
谢谢!但是太复杂 原理难以看懂
0
0
