DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript實現類似google和msn space的拖拽
javascript實現類似google和msn space的拖拽
編輯:關於JavaScript     

     最近在網上看到一些朋友到處找類似於google的個性主頁和msn space的拖拽實現,在下正好也找到了一個例子.但是問題比較多.我將其改寫並完善,建立了一個通用的函數.具體的函數實現如下:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>BlackSoul的拖拽Demo</title>

<!--

 ____________________________________

|--------Author By BlackSoul---------|

|------------2006.03.30--------------|

|[email protected]|

|------------QQ:9136194--------------|

|------http://blacksoul.cnblogs.cn---|

======================================

-->

<style type="text/CSS">

body

{

    margin:0px;

}

#aim /*設置目標層樣式*/

{

    position:absolute;/*控制層的位置所必須的style*/

    width:200px;

    height:30px;

    border:1px solid #666666;

    background-color:#FFCCCC;

}

#sourceLayer, #cloneLayer

{

    position:absolute;/*控制層的位置所必須的style*/

    width:300px;

    height:50px;

    border:1px solid #666666;

    background-color:#CCCCCC;

    cursor:move;

}

.docked

{

    display:none;

    filter:alpha(opacity=100);

}

.actived

{

    display:block;

    filter:alpha(opacity=70);

}

</style>

</head>

<body >

<div id="aim">放置范圍</div>

<div id="sourceLayer" unselectable="off"><img src="/images/NullPic.gif" alt="拖拽Demo">拖拽Demo源</div>

<div id="cloneLayer" class="docked" unselectable="off"></div>

<script type="text/javascript" language="javascript">

<!--

/*

 ====================================

|--------Author By BlackSoul---------|

|------------2006.03.30--------------|

|[email protected]|

|------------QQ:9136194--------------|

|------http://blacksoul.cnblogs.cn---|

 ====================================

*/

//設置層對象

var aim;

var sourceLayer;

var cloneLayer;

//定義各個層初始位置

var aimX;

var aimY;

var orgnX;

var orgnY;

//拖拽過程中的變量

var draging = false; //是否處於拖拽中

var offsetX = 0;     //X方向左右偏移量

var offsetY = 0;     //Y方向上下偏移量

var back;            //返回動畫對象

var thisX ;          //當前clone層的X位置

var thisY ;          //當前clone層的Y位置

var time ;

var stepX ;         

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved