Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

Heim > Web-Frontend > js-Tutorial > javascript之DIV拖动类支持在FF下拖动,调用简单_javascript技巧

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

WBOY

Freigeben： 2016-05-16 19:09:36

Original

864 Leute haben es durchsucht

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

<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> 
 
 
<div id="InfoKuang" onmousedown="MyMove.Move('InfoKuang',event,1)"> 
<span style="cursor:move;">点我调用 拖动窗口</span> 
    <ul> 
        <li> 
         
        </li> 
    </ul> 
    <ul> 
        <li> 
        显示窗口 
        </li> 
    </ul> 
    <ul> 
        <li> 
        最大化窗口 
        </li> 
    </ul> 
</div> 
 
<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>

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

Verwandte Etiketten：

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

Quelle：php.cn

Vorheriger Artikel：不错的用resizeTo和moveTo两个函数实现窗口的“打乒乓球”效果_javascript技巧 Nächster Artikel：javascript关于复选框的实用脚本代码_javascript技巧

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

Was ist eine NullPointerException und wie behebe ich sie?

2024-10-22 09:46:29
Vom Anfänger zum Programmierer: Ihre Reise beginnt mit C-Grundlagen

2024-10-13 13:53:41
Webentwicklung mit PHP freischalten: Ein Leitfaden für Anfänger

2024-10-12 12:15:51
C entmystifizieren: Ein klarer und einfacher Weg für neue Programmierer

2024-10-11 22:47:31
Entfalten Sie Ihr Programmierpotenzial: C-Programmierung für absolute Anfänger

2024-10-11 19:36:51
Entfesseln Sie Ihren inneren Programmierer: C für absolute Anfänger

2024-10-11 15:50:41
Automatisieren Sie Ihr Leben mit C: Skripte und Tools für Anfänger

2024-10-11 15:07:41
PHP leicht gemacht: Ihre ersten Schritte in der Webentwicklung

2024-10-11 14:21:21
Erstellen Sie alles mit Python: Ein Leitfaden für Anfänger, um Ihrer Kreativität freien Lauf zu lassen

2024-10-11 12:59:11
Der Schlüssel zum Programmieren: Die Leistungsfähigkeit von Python für Anfänger freischalten

2024-10-11 12:17:31

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

0

3

2161

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

0

11

2310

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

0

1

1948

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...

Aus 2024-04-18 23:52:34

0

1

1823

Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen

Aus 2024-04-16 10:10:18

0

0

1876

verwandte Themen

Mehr>

Beliebte Empfehlungen

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

Neueste Downloads

Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage