javascript之DIV拖动类支持在FF下拖动,调用简单

ttx9n · 发表于 2007-8-26 15:05:16

调用方法
onmousedown="MyMove.Move('InfoKuang',event,1)"
想问的问题是:如何当我拖到一个指定的地方时层自动吸到指定地方.
相当于拖拽布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Div Move Temp</title> 
<style> 
#InfoKuang { 
    position:absolute; 
    width:130px; 
    height:85px; 
    z-index:1; 
    filter:alpha(Opacity=60,style=0); 
    opacity:0.6; 
    padding: 3px; 
    border: 1px dashed #000000; 
    z-index:5000; 
    bottom:31px; 
                font-size:9pt; 
                 
     
     
} 
#InfoKuang ul { 
    margin: 1px; 
    padding: 0px; 
    border-top-width: 1px; 
    border-right-width: 1px; 
    border-bottom-width: 1px; 
    border-left-width: 1px; 
    border-top-style: none; 
    border-right-style: none; 
    border-bottom-style: solid; 
    border-left-style: none; 
    border-top-color: #000000; 
    border-right-color: #000000; 
    border-bottom-color: #000000; 
    border-left-color: #000000; 
    color: #000000; 
    background-color:#0faead; 
} 
#InfoKuang li { 
    height:24px; 
    padding: 1px; 
    line-height: 24px; 
} 
</style> 
</head> 
<body> 
 
点我调用 拖动窗口 
    <ul> 
        <li> 
         
        </li> 
    </ul> 
    <ul> 
        <li> 
        显示窗口 
        </li> 
    </ul> 
    <ul> 
        <li> 
        最大化窗口 
        </li> 
    </ul> 
 
</body> 
<script language="javascript"  type="text/javascript"> 
//通用 移动 Div 类 
//请保留一下我的信息,谢谢 
//Edit By Skybot 
//QQ:35287352 
function Tong_MoveDiv() 
{ 
    //参数说明 
    // id 要移动的层ID  
    // Evt 是 event, window.event; 要在FF 中可以用    e ? e :window.event; 
    // T 为 int 有数字是拖动 没有是变大小 
    this.Move=function(Id,Evt,T) 
    { 
        if(Id=="") return; 
        var o = document.getElementById(Id); 
        if(!o) return;//如果这个东东不在 
        evt = Evt ? Evt : window.event; 
        o.style.position = "absolute";//设定他的样式为绝对定位 
        o.style.zIndex = 200;//这里显示上下的 
        var obj = evt.srcElement ? evt.srcElement : evt.target; //得到个原素  使它在FF中也可以用 
        //得到当前对要移动对象的 坐标 
        var w = o.offsetWidth; 
        var h = o.offsetHeight; 
        var l = o.offsetLeft; 
        var t = o.offsetTop; 
        var div = document.createElement("DIV");//新原素DIV 
        document.body.appendChild(div); 
        div.style.cssText = "filter:alpha(Opacity=10,style=0);opacity:0.2;width:"+w+"px;height:"+h+"px;top:"+t+"px;left:"+l+"px;position:absolute;background:#000";//设定 filter； 注意opacity 是FF中的 Opacity 
        div.setAttribute("id", Id +"temp"); 
         
        if(T)//看看是拖动还是 变大小 
        { 
            this.Move_OnlyMove(Id,evt); 
        } 
        else 
        { 
             
        } 
    } 
     
    //移动函数 
    //参数 Id  要移动的层ID  
    //Evt 是 event, window.event; 要在FF 中可以用    e ? e :window.event; 
    this.Move_OnlyMove = function(Id,Evt) 
    { 
        var o = document.getElementById(Id+"temp"); 
        if(!o) return; 
        evt = Evt?Evt:window.event;//都是FF 才要这么写的 
        var relLeft = evt.clientX - o.offsetLeft;//得到左边的 宽度 
        var relTop = evt.clientY - o.offsetTop;//得到上边的 宽度 
        //抓取 事件 
        if (!window.captureEvents) 
        { 
            o.setCapture(); //指定  抓取 事件 
         
        } 
        else 
        { 
            window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
        } 
         
        //文档的 onmousemove 事件 
        document.onmousemove = function(e) 
        { 
            if (!o) return; 
            e = e ? e : window.event; 
            if (e.clientX - relLeft <= 0) 
                o.style.left = 0 +"px"; 
            else if (e.clientX - relLeft >= document.documentElement.clientWidth - o.offsetWidth - 2) 
                o.style.left = (document.documentElement.clientWidth - o.offsetWidth - 2) +"px"; 
            else 
                o.style.left = e.clientX - relLeft +"px"; 
            if (e.clientY - relTop <= 1) 
                o.style.top = 1 +"px"; 
            else if (e.clientY - relTop >= document.documentElement.clientHeight - o.offsetHeight - 30) 
                o.style.top = (document.documentElement.clientHeight - o.offsetHeight - 30) +"px"; 
            else 
                o.style.top = e.clientY - relTop +"px"; 
        } 
         
        //文档的 onmouseup 事件 
        document.onmouseup = function() 
        { 
            if (!o) return; 
            if (!window.captureEvents) 
                o.releaseCapture(); 
            else 
                window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
            var o1 = document.getElementById(Id); 
            if (!o1) return; 
            var l0 = o.offsetLeft; 
            var t0 = o.offsetTop; 
            var l = o1.offsetLeft; 
            var t = o1.offsetTop;     
            MyMove.Move_e(Id, l0 , t0, l, t); 
            document.body.removeChild(o); 
            o = null; 
        }     
    } 
     
    this.Move_e = function(Id, l0 , t0, l, t) 
    { 
        if (typeof(window["ct"+ Id]) != "undefined") clearTimeout(window["ct"+ Id]); 
        var o = document.getElementById(Id); 
        if (!o) return; 
        var sl = st = 8; 
        var s_l = Math.abs(l0 - l); 
        var s_t = Math.abs(t0 - t); 
        if (s_l - s_t > 0) 
            if (s_t) 
                sl = Math.round(s_l / s_t) > 8 ? 8 : Math.round(s_l / s_t) * 6; 
            else 
                sl = 0; 
        else 
            if (s_l) 
                st = Math.round(s_t / s_l) > 8 ? 8 : Math.round(s_t / s_l) * 6; 
            else 
                st = 0; 
        if (l0 - l < 0) sl *= -1; 
        if (t0 - t < 0) st *= -1; 
        if (Math.abs(l + sl - l0) < 52 && sl) sl = sl > 0 ? 2 : -2; 
        if (Math.abs(t + st - t0) < 52 && st) st = st > 0 ? 2 : -2; 
        if (Math.abs(l + sl - l0) < 16 && sl) sl = sl > 0 ? 1 : -1; 
        if (Math.abs(t + st - t0) < 16 && st) st = st > 0 ? 1 : -1; 
        if (s_l == 0 && s_t == 0) return; 
        if (Math.abs(l + sl - l0) < 2) 
            o.style.left = l0 +"px"; 
        else 
            o.style.left = l + sl +"px"; 
        if (Math.abs(t + st - t0) < 2)  
            o.style.top = t0 +"px"; 
        else 
            o.style.top = t + st +"px"; 
        window["ct"+ Id] = window.setTimeout("MyMove.Move_e('"+ Id +"', "+ l0 +" , "+ t0 +", "+ (l + sl) +", "+ (t + st) +")", 1); 
    } 
     
     
} 
var MyMove = new  Tong_MoveDiv(); 
</script> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

81708585 · 发表于 2022-8-19 18:56:00

终于找到了，我擦

jasonlong · 发表于 2022-11-16 08:08:53

hi哦回复iOS就看见

bp5jgbcnt · 发表于 2024-2-1 18:53:00

哦哦哦ijhhsdj

qq303604905 · 发表于 2024-5-19 10:53:35

谢谢分享，先下来用用

j__j33p · 发表于 2024-6-28 18:56:03

激动人心，无法言表！

qzdhcgs · 发表于 2024-8-12 18:25:50

天天源码论坛

i1efp6c · 发表于 2024-8-30 16:23:11

感谢楼主分享

pwseqn1h · 发表于 2024-9-15 02:52:59

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

95nd4ba · 发表于 2024-9-17 04:54:44

儿飞飞微风DVD谁vdsvd

账号		自动登录	找回密码
密码			立即注册

[JavaScript] javascript之DIV拖动类支持在FF下拖动,调用简单

相关帖子

[JavaScript] javascript之DIV拖动类 支持在FF下拖动,调用简单

相关帖子

[JavaScript] javascript之DIV拖动类支持在FF下拖动,调用简单