仿Google和Windows Live的拖拽_javascript技巧

程序员文章站 2022-05-28 19:45:34

...

<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>
<input type="text" id="evt" name="eventValue" size="40"> 
<div class="normal" overclass="over" dragclass="normal"> 
    <table width="100%"><tbody>
<tr bgcolor="#CCCCCC" bar="yes">
<td><a href="#">Cobao</a></td>
<td dragarea="yes" class="dragArea">........</td>
<td>
<a href="#" onclick="openClose(this)">-</a> 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>
<a href="#" onclick="openClose(this)">-</a> 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>
<a href="#" onclick="openClose(this)">-</a> 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>
<a href="#" onclick="openClose(this)">-</a> 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>

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

相关标签：仿Google和Windows Live的拖拽

上一篇： MySQL 优化之 Slow Query Log

下一篇： PHP文字套红处理

仿Google和Windows Live的拖拽_javascript技巧

Windows Live的@live.com域名注册漏洞利用代码_javascript技巧