最近在網上看到一些朋友到處找類似於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--------------|
|--------BlackSoulylk@gmail.com------|
|------------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--------------|
|--------BlackSoulylk@gmail.com------|
|------------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 ;