推荐内容
最近在网上看到一些朋友到处找类似于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="http://blacksoul.gamenews.cn/mail.png" 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 ; //位移速度
var stepY ; //位移速度
//初始化拖拽信息
/*
initAimX 目标x坐标
initAimY 目标y坐标
initOrgnX 拖拽源x坐标
initOrgnY 拖拽源y坐标
*/
//获得层对象
function getLayer(inAim,inSource,inClone)
{
aim = document.getElementById(inAim);
sourceLayer = document.getElementById(inSource);
cloneLayer = document.getElementById(inClone);
}
function initDrag(initAimX,initAimY,initOrgnX,initOrgnY)
{
aimX = initAimX;
aimY = initAimY;
orgnX = initOrgnX;
orgnY = initOrgnY;
//设置各个开始层的位置
aim.style.pixelLeft = aimX;
aim.style.pixelTop = aimY;
sourceLayer.style.pixelLeft = orgnX;
sourceLayer.style.pixelTop = orgnY;
cloneLayer.style.pixelLeft = orgnX;
cloneLayer.style.pixelTop = orgnY;
}
//准备拖拽
function BeforeDrag()
{
if (event.button != 1)
{
return;
}
cloneLayer.innerHTML = sourceLayer.innerHTML; //复制拖拽源内容
offsetX = document.body.scrollLeft event.clientX - sourceLayer.style.pixelLeft;
offsetY = document.body.scrollTop event.clientY - sourceLayer.style.pixelTop;
cloneLayer.className = "actived";
draging = true;
}
//拖拽中
function OnDrag()
{
if(!draging)
{
return;
}
//更新位置
event.returnValue = false;
cloneLayer.style.pixelLeft = document.body.scrollLeft event.clientX - offsetX;
cloneLayer.style.pixelTop = document.body.scrollTop event.clientY - offsetY;
}
//结束拖拽
function EndDrag()
{
if (event.button != 1)
{
return;
}
draging = false;
if (event.clientX >= aim.style.pixelLeft && event.clientX <= (aim.style.pixelLeft aim.offsetWidth) &&
event.clientY >= aim.style.pixelTop && event.clientY <= (aim.style.pixelTop aim.offsetHeight))
评论列表