js实现可拖动的对话框的几个例子
一、可拖动
需要跟踪鼠标坐标的变化，从而不断修正对话框的坐标。
假设待移动的对话框为objMove，则有
pY = event.y - objMove.style.pixelTop;
其中pixelLeft、pixelTop是对话框左边缘、顶边缘与document左边缘、顶边缘的距离，event.x、event.y是鼠标按下（未松开）的坐标值。
因此可得到鼠标抓紧点与对话框边缘的坐标差pX，pY。只要在鼠标移动过程中，保持这一坐标差恒定不变，月亮走我也走，鼠标送阿框到村口，即可实现对话框的拖动：
objMove.style.top = event.y - pY;
这只是原理，还需要一些函数进行支撑。
设置三个函数：
MDown()//鼠标按下时触发，得到pX,pY的值，放在对话框的onmousedown调用
MMove()//鼠标移动时触发,拖动，document.onmousemove
MUp()//鼠标松开时触发，释放,document.onmouseup,当然放在对话框的onmouseup调用也是可以的
注意这个对话框要用绝对定位。
二、对话框内的文本框等可正常编辑
如果对话框内有文本框、下拉框等可供用户进行编辑的控件，如果不进行特别处理，则光标在这些控件内拖动同样会引起对话框的移动，这跟我们平时使用的习惯不符，给框内的编辑带来麻烦。
如果知道鼠标抓紧时落在哪种类型的控件上就好了。
可以用event.srcElement来获取这个控件
if( hitpoint.tagName == "INPUT"
|| hitpoint.tagName == "TEXTAREA"
|| hitpoint.tagName == "SELECT" )
{
objMove = null;//不鸟它
return;
}
三、半透明
这个对话框还要有点透明，拖动时下面的元素若隐若现，这样才让人够兴奋，浮想联翩。
主要是CSS里实现。style="FILTER:alpha(opacity=90);position:absolute;left:60%;……
不过这好象在IE系的浏览器里才有用，对firefox这些则没效果。
附：drag.js
var pX = 0;
var pY = 0;
document.onmouseup = MUp;
document.onmousemove = MMove;
function MDown(objMoveId)
{
var hitpoint = event.srcElement;
if( hitpoint.tagName == "INPUT"
|| hitpoint.tagName == "TEXTAREA"
|| hitpoint.tagName == "SELECT" )
{
objMove = null;
return;
}
objMove = document.getElementById(objMoveId);
if( objMove == null )
{
return;
}
objMove.style.cursor = "move";
//objMove.setCapture();
pX = event.x - objMove.style.pixelLeft;
pY = event.y - objMove.style.pixelTop;
}
function MMove()
{
if(objMove != null)
{
objMove.style.left = event.x - pX;
objMove.style.top = event.y - pY;
}
}
function MUp()
{
if(objMove != null)
{
//objMove.releaseCapture();
objMove.style.cursor = "default";
objMove = null;
}
}
您可能感兴趣的文章：
js实现可拖动的对话框的几个例子
jQuery模式对话框 mopBox
js简单拖动层效果
jQuery对话框插件 jBox
JS父子窗口相互取值与赋值的方法参考
js弹出层之1：JQuery.Boxy (二)
HTML5 高级教程--拖放 API 实现拖放排序
jQuery boxy弹出层插件中文演示及使用讲解
【精品推荐】web开发人员应该知道的31个jQuery模态对话框
element-ui对话框可拖拽的功能如何实现？（附代码）