222
 12 12
发新话题
打印

简单的AJAX拖拽代码

简单的AJAX拖拽代码

简单的AJAX拖拽代码,感兴趣的朋友可以看看
复制内容到剪贴板
代码:
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
               
        <style>
                        body { margin:0px; }
                        #one { width:200px; height:160px; border:1px #000000 solid; background:#FFFFFF; }
                        #two { width:200px; height:160px; border:1px #000000 solid; background:#000000; }
                </style>
        </head>
        <body>
                <div id="one">
        
        </div>
        
        <div id="two">
        
        </div>
    </body>
复制内容到剪贴板
代码:
<script>
                function $(id){
                        return document.getElementById(id);
                }
                function dragDiv(id, zIndex){
                        var drag = {
                                isIe: window.navigator.userAgent.indexOf("MSIE") != -1,
                                $: function(){
                                        return document.getElementById(id);
                                },
                                move: function(event){
                                        event = event || window.event;
                                        nMouseX = event.clientX || event.pageX;
                                        nMouseY = event.clientY || event.pageY;
                                        document.onselectstart=function(){return false;}
                                        if(this.id && isDrag == true){
                                                this.style.left = lx + nMouseX - mouseX + 'px';
                                                this.style.top = tx + nMouseY - mouseY + 'px';
                                        }
                                },
                                down: function(event){
                                        event = event || window.event;
                                        mouseX = event.clientX || event.pageX;
                                        mouseY = event.clientY || event.pageY;
                                        isDrag = true;
                                        wx = this.offsetWidth - mouseX;
                                        hx = this.offsetHeight - mouseY
                                        lx = this.offsetLeft;
                                        tx = this.offsetTop;
                                       
                                        if(!_self.isIe)this.style.MozOpacity = "1";
                                        if(_self.isIe)this.style.filter = "alpha(opacity=100)";
复制内容到剪贴板
代码:
if(document.getElementById('blackboard') != null){
                                                document.body.removeChild($('blackboard'));
                                        }
                                        nDiv = document.createElement('div');
                                        nDiv.id = 'blackboard';
                                        document.body.appendChild(nDiv);
                                        $('blackboard').style.background = '#000000';
                                        $('blackboard').style.position = 'absolute';
                                        $('blackboard').style.top = '0';
                                        $('blackboard').style.left = '0';
                                        if(_self.isIe){
                                                $('blackboard').style.width = document.documentElement.offsetWidth;
                                                $('blackboard').style.height = document.documentElement.offsetHeight;
                                                $('blackboard').style.filter = "alpha(opacity=70)";
                                        }else{
                                                $('blackboard').style.width = document.documentElement.scrollWidth + 'px';
                                                $('blackboard').style.height =  document.documentElement.scrollHeight + 'px';
                                                $('blackboard').style.MozOpacity = "0.5";
                                        }

                                        this.style.zIndex = "999";
                                        this.style.cursor = "move";
                                        this.style.position = "absolute";
                                },
                                up: function(){
                                        isDrag = false;
                                        if(!_self.isIe)this.style.MozOpacity = "1";
                                        if(_self.isIe)this.style.filter = "alpha(opacity=100)";
                                        document.body.removeChild(nDiv);
                                        this.style.zIndex = zIndex;
                                        this.style.cursor = "default";
                                }
                        };
复制内容到剪贴板
代码:
var $ = function(){
                                return document.getElementById(id);
                        };
                        var move = function(event){
                                        event = event || window.event;
                                        nMouseX = event.clientX || event.pageX;
                                        nMouseY = event.clientY || event.pageY;
                                        if(this.id && isDrag == true){
                                                this.style.left = lx + nMouseX - mouseX + 'px';
                                                this.style.top = tx + nMouseY - mouseY + 'px';
                                        }
                                };
                        var down = function(event){
                                        event = event || window.event;
                                        mouseX = event.clientX || event.pageX;
                                        mouseY = event.clientY || event.pageY;
                                        isDrag = true;
                                        wx = this.offsetWidth - mouseX;
                                        hx = this.offsetHeight - mouseY
                                        lx = this.offsetLeft;
                                        tx = this.offsetTop;
                                       
                                        if(!ie)this.style.MozOpacity = "1";
                                        if(ie)this.style.filter = "alpha(opacity=100)";
                                       
                                        this.style.zIndex = "999";
                                        this.style.cursor = "move";
                                        this.style.position = "absolute";
                                };
                        var up = function(){
                                        isDrag = false;
                                        if(!ie)this.style.MozOpacity = "1";
                                        if(ie)this.style.filter = "alpha(opacity=100)";
                                        this.style.zIndex = zIndex;
                                        this.style.cursor = "default";
                                };
                        var _self = drag;
                        var isDrag = wx = hx = lx = tx = 0;
                        _self.$(id).onmousemove = _self.move;
                        _self.$(id).onmousedown = _self.down;
                        _self.$(id).onmouseup = _self.up;
                        _self.$(id).style.zIndex = zIndex;
                }
                dragDiv('one',2);
                dragDiv('two',1);
                        </script>
</html>
成功只有努力去奋斗!

TOP

感兴趣,但看不懂,所以不用看了...路过
本来不穷,自从做了站长以后就越来越穷,就成了现在的贫穷站长!

TOP

俺也看不懂,挺想学AJAX的
不知道,是否好学
宝剑锋从磨砺出
梅花香自苦寒来

TOP

回复 3# 的帖子

如果你JAVASCRIPT学的牛,学AJAX应该比较轻松的
路漫漫其修远兮,吾将上下而求索!

TOP

JS基本上不懂
看来学起来也难呀
慢慢学吧
宝剑锋从磨砺出
梅花香自苦寒来

TOP

回复 5# 的帖子

别想的太难...
hostmonster
好好活着,做有意义的事!

TOP

只要功夫深铁杵磨成针
慢慢的努力
成功只有努力去奋斗!

TOP

回复 7# 的帖子

注意把握时间就行了!
hostmonster
好好活着,做有意义的事!

TOP

我是不是来到了一所励志论坛~

TOP

回复 9# 的帖子

真聪明....
路漫漫其修远兮,吾将上下而求索!

TOP

 12 12
发新话题