JavaScript实现AJAX的拖动效果-例子1-阿里云开发者社区

开发者社区> walb呀> 正文

JavaScript实现AJAX的拖动效果-例子1

简介:
+关注继续查看
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>drag layer</title>
<style>
body,table
{color:#000000;
    font-size
:12px;
}

div.div_one
{}
.dragBar
{color:#FFFFFF;
    font-weight
:bold}

</style>
<script language="javascript" defer>
/*written by joelee@51js
*/

    
var tmpElement=null;
    
var dragElement=null;
    
var downX,downY,tmp_o_x,tmp_o_y;
    
var refElement=null;
    
var dragActive=0;
    
var draging=0;
function readyDrag(){
    dragActive
=1;
    
if(event.srcElement.tagName!="DIV")
        
return;
    dragElement
=event.srcElement.parentNode;
    tmpElement
=dragElement.cloneNode(true);
    tmpElement.style.filter
="alpha(opacity=90)";
    tmpElement.style.zIndex
=2;
    dragElement.style.zIndex
=1;
    tmpElement.style.position
="absolute";
    
if(dragElement.parentNode.tagName!="BODY"){
        dragElement.style.left
=dragElement.offsetLeft+dragElement.parentNode.style.pixelLeft;
        dragElement.style.top
=dragElement.offsetTop+dragElement.parentNode.style.pixelTop;
    }

    downX
=event.clientX;
    downY
=event.clientY;
    tmp_o_x
=dragElement.style.pixelLeft;
    tmp_o_y
=dragElement.style.pixelTop;
    tmpElement.style.visibility
="hidden";
    document.body.appendChild(tmpElement);
    document.onmousemove
=startDrag;
    }

    document.onmouseup
=endDrag;
function startDrag(){
    
if(dragActive==1&&event.button==1&&dragElement!=null&&tmpElement!=null){
        tmpElement.style.visibility
="visible";
        tmpElement.style.left
=tmp_o_x+event.clientX-downX;
        tmpElement.style.top
=tmp_o_y+event.clientY-downY;
        dragElement.style.backgroundColor
="#CCCCCC";
        document.body.style.cursor
="move";
        draging
=1;
    }

}

function endDrag(){
    
if(dragActive==1&&tmpElement!=null){
        
if(draging==1){
            dragElement.removeNode(
true);
            draging
=0;
        }

        tmpElement.style.filter
="alpha(opacity=100)";
        tmpElement.style.zIndex
=1;
        document.body.style.cursor
="default";
        
if(refElement!=null&&refElement.parentNode!=null&&refElement.parentNode.tagName!="BODY"){
            tmpElement.style.width
=refElement.parentNode.style.width;
            tmpElement.style.position
="";
            refElement.parentNode.insertBefore(tmpElement,refElement);
        }

    }

    dragElement
=null;
    tmpElement
=null;
    dragActive
=0;
}

function readyInsert(){
    
if(dragActive==1){
        
var element=event.srcElement;
        
if(element==dragElement)return;
        
if(element.tagName!="DIV")
            
return;
        
if(element.className=="dragBar"||element.className=="textSheet"||element.className=="blankBar")
            element
=element.parentNode;
        element.style.backgroundColor
="#CCCCCC";
        element.style.filter
="alpha(opacity=50)";
        refElement
=element;
    }

}

function failInsert(){
    
var element=event.srcElement;
    
if(element.tagName!="DIV")
        
return;
    
try{
        
if(element.className=="dragBar"||element.className=="textSheet"||element.className=="blankBar")
            element
=element.parentNode;
    }
catch(e){}
    element.style.filter
="alpha(opacity=100)";
    element.style.backgroundColor
="#FFFFFF";
    refElement
=null;
}

document.onselectstart
=function(){return false}
</script>
</head>

<body>
<div id="div_one" class="div_one" style="position:absolute; left:116px; top:137px; width:433px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF;" onMouseOver="readyInsert()" onMouseOut="failInsert()">
  
<div onMouseDown="readyDrag()" style="cursor:move; border:1px solid #996666; background-color:#996666; height:20px" name="dragDIV" class="dragBar"><img src="snap_icon.gif" width="16" height="16">Window</div>
<div class="textSheet" style="border:1px solid #996666;">Content<br>
  Content
<br>
  Content
<br>
  Content  
<br>
</div>
<div class="blankBar" style="height:10px"></div></div>
<div id="grid1" style="position:absolute; left:534px; top:37px; width:336px; height:15px; z-index: 100; visibility: visible;">
  
<div style="height:20px;z-index:2;" onMouseOver="readyInsert()" onMouseOut="failInsert();">把层拖动到这儿</div>
</div>
<div id="grid2" style="position:absolute; left:20px; top:40px; width:494px; height:15px; z-index: 100; visibility: visible;">
  
<div style="height:20px;z-index:2; background-image:url()" onMouseOver="readyInsert()" onMouseOut="failInsert();">把层拖动到这儿</div>
</div>
<div id="div_one" class="div_one" style="position:absolute; left:204px; top:277px; width:433px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF;" onMouseOver="readyInsert()" onMouseOut="failInsert()">
  
<div onMouseDown="readyDrag()" style="cursor:move; border:1px solid #996666; background-color:#996666; height:20px" name="dragDIV" class="dragBar"><img src="snap_icon.gif" width="16" height="16">BBS</div>
  
<div class="textSheet" style="border:1px solid #996666;">Content</div>
  
<div class="blankBar" style="height:10px"></div>
</div>
<div id="div_one" class="div_one" style="position:absolute; left:561px; top:195px; width:433px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF;" onMouseOver="readyInsert()" onMouseOut="failInsert()">
  
<div onMouseDown="readyDrag()" style="cursor:move; border:1px solid #996666; background-color:#996666; height:20px" name="dragDIV" class="dragBar"><img src="snap_icon.gif" width="16" height="16">Log</div>
  
<div class="textSheet" style="border:1px solid #996666;">Content<br>
    Content
<br>
    Content    
<br>
  Content
<br>
</div>
  
<div class="blankBar" style="height:10px"></div>
</div>
<div id="div_one" class="div_one" style="position:absolute; left:438px; top:74px; width:433px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF;" onMouseOver="readyInsert()" onMouseOut="failInsert()">
  
<div onMouseDown="readyDrag()" style="cursor:move; border:1px solid #996666; background-color:#996666; height:20px" name="dragDIV" class="dragBar"><img src="snap_icon.gif" width="16" height="16">Worker</div>
  
<div class="textSheet" style="border:1px solid #996666;">Content</div>
  
<div class="blankBar" style="height:10px"></div>
</div>
<div id="div_one" class="div_one" style="position:absolute; left:206px; top:406px; width:433px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF;" onMouseOver="readyInsert()" onMouseOut="failInsert()">
  
<div onMouseDown="readyDrag()" style="cursor:move; border:1px solid #996666; background-color:#996666; height:20px" name="dragDIV" class="dragBar"><img src="snap_icon.gif" width="16" height="16">Tools</div>
  
<div class="textSheet" style="border:1px solid #996666;">Content</div>
  
<div class="blankBar" style="height:10px"></div>
</div>
</body>
</html>
本文转自博客园执着的笨蛋的博客,原文链接:JavaScript实现AJAX的拖动效果-例子1,如需转载请自行联系原博主。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Android JAVA 语言基础例子代码
Android的界面一般都是java开发的,因此对于c++,.net人员来说理解和编写有一个适应过程,最近参考了一下资料,把这些涉的一些java基础使用以例子代码的形式总结起来,记录了这个平台的熟悉过程。
812 0
一些有用的javascript实例分析(三)
原文:一些有用的javascript实例分析(三) 1 10 输入两个数字,比较大小 2 window.onload = function () 3 { 4 var aInput = document.
639 0
《JavaScript启示录》——1.2 JavaScript构造函数构建并返回对象实例
如果说“构造函数只是一个函数”,那么我会说“你是对的,除非使用new关键字来调用该函数。”(如new String('foo'))。如果使用new调用某函数,该函数则担任一个特殊的角色,JavaScript给予该函数特殊待遇,将该函数的this值设置为正在构建的新对象。
1317 0
java基础之:匿名内部类应用例子一
一:接口 1 package com.yeepay.sxf.testclassforinner; 2 3 /** 4 * 回调接口. 5 * @author shangxiaofei 6 * 7 */ 8 public interface CallBa...
776 0
JavaScript实现的网页放大镜效果
今天在观看视频学习的时候,学到了一个小技巧。就拿过来与大家进行分享一下啦。 实现的原理 分析需求:需要两张图,一大一小。然后根据鼠标的动作显示出不同的区域块的图像。 核心:鼠标事件的获取和处理。
1032 0
Java子类实例化的过程
//继承 class Work{ public Work(){ System.out.println("父类中的方法"); } } class Worker extends Work{ public Worker(){ System.out.println("子类中的方法"); } } class HelloWorld{ public static void main(String[] args){ Worker wo = new Worker(); } } 代码实例知道,输出结果是先调用父类中的构造方法,再调用子类中的构造方法。
705 0
Java 图片添加水印效果
package com.xiaowu.drawwater.demo; import java.awt.AlphaComposite; import java.awt.Graphics2D; import java.
997 0
+关注
1038
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载