js实现可拖动的对话框的几个例子

发布时间:2020-01-06编辑:脚本学堂
本文介绍下用javascript脚本实现可拖动的对话框的例子,包括可拖动、可编辑、半透明对话框效果等。有需要的朋友,可以参考下。

一、可拖动
需要跟踪鼠标坐标的变化,从而不断修正对话框的坐标。
假设待移动的对话框为objMove,则有
 

复制代码 代码示例:
pX = event.x - objMove.style.pixelLeft;
pY = event.y - objMove.style.pixelTop;

其中pixelLeft、pixelTop是对话框左边缘、顶边缘与document左边缘、顶边缘的距离,event.x、event.y是鼠标按下(未松开)的坐标值。

因此可得到鼠标抓紧点与对话框边缘的坐标差pX,pY。只要在鼠标移动过程中,保持这一坐标差恒定不变,月亮走我也走,鼠标送阿框到村口,即可实现对话框的拖动:
 

复制代码 代码示例:
objMove.style.left = event.x - pX;
objMove.style.top = event.y - pY;

这只是原理,还需要一些函数进行支撑。

设置三个函数:
MDown()//鼠标按下时触发,得到pX,pY的值,放在对话框的onmousedown调用
MMove()//鼠标移动时触发,拖动,document.onmousemove
MUp()//鼠标松开时触发,释放,document.onmouseup,当然放在对话框的onmouseup调用也是可以的
注意这个对话框要用绝对定位。

二、对话框内的文本框等可正常编辑
如果对话框内有文本框、下拉框等可供用户进行编辑的控件,如果不进行特别处理,则光标在这些控件内拖动同样会引起对话框的移动,这跟我们平时使用的习惯不符,给框内的编辑带来麻烦。
如果知道鼠标抓紧时落在哪种类型的控件上就好了。
可以用event.srcElement来获取这个控件
  

复制代码 代码示例:
  var hitpoint = 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 objMove = null;
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;
    }
}