仿Google和Windows Live的拖拽1

news/2024/7/4 1:31:35 标签: windows, google, function, class, border, div
class="baidu_pl"> <div id="article_content" class="article_content clearfix"> <div id="content_views" class="htmledit_views"> <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 οncοntextmenu="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><a href="#">Cobao</a></td><td dragArea="yes" class="dragArea">........</td><td><a href="#" οnclick="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="#" οnclick="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="#" οnclick="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="#" οnclick="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>
</BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var dragObjs = [];      //可以拖拽的元素数组
var dragObjTops = [];
var dragHelper = document.getElementById("dragHelper");     //拖拽时位置框
var dragObj = null;      //拖拽对象元素
var dragObjPos = 0;
var dragObjOffset = {left:0,top:0};  //拖拽对象原始位置
var mouseInDragObjOffset = {x:0,y:0}; //鼠标在拖拽对象中的相对位置
var initHeight = 40;
Number.prototype.NaN0=class="tags" href="/tags/FUNCTION.html" title=function>function(){return isNaN(this)?0:this;}
class="tags" href="/tags/FUNCTION.html" title=function>function getPosition(e){  //获取元素相对文档的绝对位置
var left = 0;
var top  = 0;
while (e.offsetParent){
left += e.offsetLeft;
top  += e.offsetTop;
e     = e.offsetParent;
}
left += e.offsetLeft;
top  += e.offsetTop;
return {x:left, y:top};
}
class="tags" href="/tags/FUNCTION.html" title=function>function mouseCoords(ev){  //获取鼠标相对文档的绝对位置
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop  - document.body.clientTop
};
}
class="tags" href="/tags/FUNCTION.html" title=function>function getMouseOffset(target, ev){  // 获取鼠标相对元素的相对位置
ev = ev || window.event;
var elementPos    = getPosition(target);
var mousePos  = mouseCoords(ev);
return {x:mousePos.x - elementPos.x, y:mousePos.y - elementPos.y};
}
class="tags" href="/tags/FUNCTION.html" title=function>function mouseDown(ev){
ev = ev || window.event;
target = ev.srcElement || ev.target;
if(dragObj){
return;
}
var dragArea = false;
if(target.getAttribute("dragArea")){
dragArea = true;
}
while(!target.getAttribute("isDragObj")){
if(target.tagName=="HTML")
break;
target = target.parentNode;
}
if(dragArea && target.getAttribute("isDragObj")){
dragObj = target;
//重写的目的是让当前对象在最上层
document.body.removeChild(dragObj);
document.body.appendChild(dragObj);
//记录下拖拽对象原始位置
dragObjOffset.left = dragObj.style.left;
dragObjOffset.top = dragObj.style.top;
dragObj.className = dragObj.getAttribute("overClass");
//鼠标在拖拽对象中的相对位置
mouseInDragObjOffset = getMouseOffset(dragObj, ev);
dragHelper.style.left = dragObj.style.left;
dragHelper.style.top = dragObj.style.top;
dragHelper.style.width = dragObj.offsetWidth;
dragHelper.style.height = dragObj.offsetHeight;
dragHelper.style.display = "";
//alert(dragObj.offsetWidth+":"+dragObj.clientWidth);
}
}
class="tags" href="/tags/FUNCTION.html" title=function>function mouseUp(ev){
ev = ev || window.event;
target = ev.srcElement || ev.target;
if(dragObj){
dragObj.style.left = dragHelper.style.left;
dragObj.style.top = dragHelper.style.top;
dragHelper.style.display = "none";
dragObj.className = dragObj.getAttribute("dragClass");
dragObj = null;
}
}
class="tags" href="/tags/FUNCTION.html" title=function>function mouseMove(ev){
ev = ev || window.event;
if(dragObj) {
var mousePos = mouseCoords(ev);
/*dragHelper.style.left = dragObjOffset.left;
dragHelper.style.top = dragObjOffset.top;
dragHelper.style.width = dragObj.offsetWidth;
dragHelper.style.height = dragObj.offsetHeight;
dragHelper.style.display = "";*/
var windowWidth = document.body.offsetWidth;  //窗口宽度
var windowHeight = document.body.offsetHeight;  //窗口高度
//拖拽对象应该所在当前位置
var dragObjLeft = mousePos.x - mouseInDragObjOffset.x;
var dragObjTop  = mousePos.y - mouseInDragObjOffset.y;
//增加判断，不然拖拽对象拖出浏览器窗口
if(dragObjLeft >= 0 && dragObjLeft <= windowWidth - dragObj.offsetWidth - 20)
dragObj.style.left = dragObjLeft;
if(dragObjTop >=0)
dragObj.style.top = dragObjTop;
repaint();
}
}
//克隆对象
class="tags" href="/tags/FUNCTION.html" title=function>function cloneObject(srcObj, destObj){
destObj = srcObj.cloneNode(true);
}
class="tags" href="/tags/FUNCTION.html" title=function>function makeDraggable(element){
element.setAttribute("isDragObj", "y");
}
class="tags" href="/tags/FUNCTION.html" title=function>function repaint(){
for(i=0; i<dragObjs.length; i++){
if(dragObjs[i] == dragObj){
dragObjPos = i;
dragObjs[i] = dragHelper;
break;
}
}
if(dragObjPos>0 && parseInt(dragObj.style.top)<parseInt(dragObjs[dragObjPos-1].style.top)){
dragObjs[dragObjPos] = dragObjs[dragObjPos-1];
dragObjs[dragObjPos-1] = dragHelper;
dragObjPos = dragObjPos - 1;
}
if(dragObjPos<dragObjs.length-1 && parseInt(dragObj.style.top)>parseInt(dragObjs[dragObjPos+1].style.top)){
dragObjs[dragObjPos] = dragObjs[dragObjPos+1];
dragObjs[dragObjPos+1] = dragHelper;
dragObjPos = dragObjPos + 1;
}
paintDragObjs();
dragObjs[dragObjPos] = dragObj;
}
class="tags" href="/tags/FUNCTION.html" title=function>function paintDragObjs(){
var h = 40;
for(i=0; i<dragObjs.length; i++){
dragObjs[i].style.left = 20;
dragObjs[i].style.top = h;
h += dragObjs[i].offsetHeight + 10;
}
}
class="tags" href="/tags/FUNCTION.html" title=function>function openClose(obj){
obj.innerHTML = obj.innerHTML=="-"?"+":"-";
while(obj.tagName != "TBODY"){
obj = obj.parentNode;
}
for(i=0; i<obj.childNodes.length; i++){
if(obj.childNodes[i].nodeName == "#text"
|| obj.childNodes[i].getAttribute("bar")){ continue; }
obj.childNodes[i].style.display=obj.childNodes[i].style.display==""?"none":"";
}
paintDragObjs();
}
document.onmousedown = mouseDown;
document.onmouseup = mouseUp;
document.onmousemove = mouseMove;
window.onload = class="tags" href="/tags/FUNCTION.html" title=function>function(){
var objs = document.getElementsByTagName("Div");
for(i=0; i<objs.length; i++){
var item = objs.item(i);
//if(i==1)item.style.height=150;
if(item.getAttribute("overClass")){
makeDraggable(item);
dragObjs.push(item);
item.style.left = 20;
item.style.top = initHeight;
dragObjTops.push(initHeight);
initHeight += item.offsetHeight + 10;
}
}
// dragHelper = document.createElement(′DIV′);
// dragHelper.style.cssText = ′position:absolute;display:none;′;
// document.body.appendChild(dragHelper);
}
//-->
</SCRIPT>
</HTML>
  div> div> <div id="treeSkill">div>

http://www.niftyadmin.cn/n/1405806.html

相关文章

solr的搭建

solr的搭建

这里忽略java安装和tomcat安装&#xff0c;这里使用的是solr-4.10.0 1、到apache下载solr&#xff0c;地址&#xff1a; http://mirrors.hust.edu.cn/apache/lucene/solr/ 2、解压出solr-4.10.0 3、复制solr-4.10.0\example\webapps中的solr.war文件到tomcat安装目录中的webapp…
阅读更多...
Java操作Hbase进行建表、删表以及对数据进行增删改查，条件查询

Java操作Hbase进行建表、删表以及对数据进行增删改查，条件查询

1、搭建环境 新建JAVA项目&#xff0c;添加的包有: 有关Hadoop的hadoop-core-0.20.204.0.jar 有关Hbase的hbase-0.90.4.jar、hbase-0.90.4-tests.jar以及Hbase资源包中lib目录下的所有jar包 2、主要程序 package com.wujintao.hbase.test; import java.io.IOException; …
阅读更多...
非常不错的表单显示效果

非常不错的表单显示效果

<html> <head><meta http-equiv"Content-Type" content"text/html; charsetgb2312"><title>网页特效|Linkweb.cn/Js|---非常不错的表单显示效果</title><style type"text/css">body{font-family: verdana,…
阅读更多...
用CSS设计艺术字集锦

用CSS设计艺术字集锦

<html> <head><meta http-equiv"Content-Type" content"text/html; charsetgb2312"><title>网页特效代码|JsCode.CN|---用CSS设计艺术字集锦&#xff08;二&#xff09;</title><STYLE typetext/css>.title_1 { FONT…
阅读更多...
mysql对事务的处理

mysql对事务的处理

MySQL的事务支持不是绑定在MySQL服务器本身&#xff0c;而是与存储引擎相关1.MyISAM&#xff1a;不支持事务&#xff0c;用于只读程序提高性能 2.InnoDB&#xff1a;支持ACID事务、行级锁、并发 3.Berkeley DB&#xff1a;支持事务一个事务是一个连续的一组数据库操作&#xff…
阅读更多...
全国省市县无刷新多级关联菜单

全国省市县无刷新多级关联菜单

<html><head><title>网页特效|Linkweb.cn/Js|---全国省市县无刷新多级关联菜单</title><meta http-equiv"Content-Type" content"text/html; charsetgb2312"><style>body,select{ font-size:9pt; font-family:Verdana…
阅读更多...
构建完备的Ajax开发工具箱

构建完备的Ajax开发工具箱

构建完备的Ajax开发工具箱作为一个有经验的Web应用开发人员&#xff0c;也许你可以熟练地应用某种服务器端技术&#xff08;或者&#xff0c;应用多种服务器端技术&#xff09;来构建Web应用。我们已经看到&#xff0c;在过去几年中&#xff0c;服务器端有了长足的发展&#xf…
阅读更多...
oracle的加解密函数

oracle的加解密函数

-- 加密函数 CREATE OR REPLACE FUNCTION FUN_ENCRYPTION( V_STR VARCHAR2 , V_KEY VARCHAR2 ) RETURN VARCHAR2 AS V_KEY_RAW RAW(24) ; V_STR_RAW RAW(2000) ; V_RETURN_STR VARCHAR2(2000) ; V_TYPE PLS_INTEGER ; BEGIN /*****************************…
阅读更多...
最新文章

Copyright @ 2022~2023