仿Google和Windows Live的拖拽

369 阅读 0 评论 244 点赞

我是靠谱客的博主刻苦盼望，这篇文章主要介绍仿Google和Windows Live的拖拽，现在分享给大家，希望可以做个参考。

<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<style type="text/css"> 
body 
{ 
    margin:10px; 
}

#dragHelper 
{ 
    position:absolute;/*重要*/ 
    border:2px dashed #000000; 
    background-color:#FFFFFF; 
    filter: alpha(opacity=30); 
}

.normal 
{ 
    position:absolute;/*重要*/ 
    width:300px; 
    #height:10px; 
    border:1px solid #666666; 
    background-color:#FFFFFF; 
}

.over 
{ 
    position:absolute;/*重要*/ 
    width:300px; 
    #height:10px; 
    border:1px solid #666666; 
    background-color:#f3f3f3; 
    filter: alpha(opacity=50); 
}

.dragArea { 
    CURSOR: move; 
}

</style> 
</HEAD>

<BODY oncontextmenu="window.event.returnValue=false"> 
<input type="text" id="evt" name="eventValue" size="40" /> 
<div id="dragHelper" style="display:none"></div> 
<div class="normal" overClass="over" dragClass="normal"> 
    <table width="100%"> 
        <tbody> 
            <tr bgcolor="#CCCCCC" bar="yes"><td>Cobao</td><td dragArea="yes" class="dragArea">........</td><td>- x</td></tr> 
            <tr><td colspan="3">地址:http://www.cobao.cn</td></tr> 
            <tr><td colspan="3">关键字:</td></tr> 
            <tr><td colspan="3">说明:</td></tr> 
        </tbody> 
    </table> 
</div> 
<div class="normal" overClass="over" dragClass="normal"> 
    <table width="100%"> 
        <tbody> 
            <tr bgcolor="#CCCCCC" bar="yes"><td>新浪</td><td dragArea="yes" class="dragArea">........</td><td>- x</td></tr> 
            <tr><td colspan="3">地址:http://www.sina.com.cn</td></tr> 
            <tr><td colspan="3">关键字:</td></tr> 
            <tr><td colspan="3">说明:</td></tr> 
        </tbody> 
    </table> 
</div> 
<div class="normal" overClass="over" dragClass="normal"> 
    <table width="100%"> 
        <tbody> 
            <tr bgcolor="#CCCCCC" bar="yes"><td>网易</td><td dragArea="yes" class="dragArea">........</td><td>- x</td></tr> 
            <tr><td colspan="3">地址:http://www.163.com</td></tr> 
            <tr><td colspan="3">关键字:</td></tr> 
            <tr><td colspan="3">说明:</td></tr> 
        </tbody> 
    </table> 
</div> 
<div class="normal" overClass="over" dragClass="normal"> 
    <table width="100%"> 
        <tbody> 
            <tr bgcolor="#CCCCCC" bar="yes"><td>QQ</td><td dragArea="yes" class="dragArea">........</td><td>- x</td></tr> 
            <tr><td colspan="3">地址:http://www.qq.com</td></tr> 
            <tr><td colspan="3">关键字:</td></tr> 
            <tr><td colspan="3">说明:</td></tr> 
        </tbody> 
    </table> 
</div>

</BODY> 
 
</HTML>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]