实现和163一样的拖拽效果

来源：互联网发布：windows旗舰版激活密钥编辑：程序博客网时间：2024/05/22 07:34

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ceshi.aspx.cs" Inherits="MyLog_ceshi" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
<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>
    <form id="form1" runat="server">
     <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">

</script>

    </form>
</body>
</html>