仿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><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>

</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=function(){return isNaN(this)?0:this;}

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};

}

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
 };
}

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};
}

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);
 }
}

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;
 }

}

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();
 }
}

//克隆对象
function cloneObject(srcObj, destObj){
 destObj = srcObj.cloneNode(true);
}

function makeDraggable(element){
 element.setAttribute("isDragObj", "y");
}

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;

}

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;
 }
}

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 = 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>

提示：您可以先修改部分代码再运行

时间： 2024-09-20 12:02:44

仿Google和Windows Live的拖拽的相关文章

仿Google和Windows Live的拖拽_javascript技巧

Cobao ........ - x 地址:http://www.cobao.cn 关键字: 说明: 新浪 ........ - x 地址:http://www.sina.com.cn 关键字: 说明: 网易 ........ - x 地址:http://www.163.com 关键字: 说明: QQ ........ - x 地址:http://www.qq.com 关键字: 说明:

[Android]仿新版QQ的tab下面拖拽标记为已读的效果

以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/4182929.html 可拖拽的红点,(仿新版QQ,tab下面拖拽标记为已读的效果),拖拽一定的距离可以消失回调.      GitHub:DraggableFlagView(https://github.com/wangjiegulu/DraggableFlagView) 实现原理: 当根据touch事件的移动,不断调用onDraw()方法进行刷新绘制. *注

&amp;#106avascript实现类似google和msn space的拖拽

google      最近在网上看到一些朋友到处找类似于google的个性主页和msn space的拖拽实现,在下正好也找到了一个例子.但是问题比较多.我将其改写并完善,建立了一个通用的函数.具体的函数实现如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>BlackSoul的拖拽D

Android贝塞尔曲线初步学习第二课 仿QQ未读消息气泡拖拽黏连效果

上一节初步了解了Android端的贝塞尔曲线,这一节就举个栗子练习一下,仿QQ未读消息气泡,是最经典的练习贝塞尔曲线的东东,效果如下 附上github源码地址:https://github.com/MonkeyMushroom/DragBubbleView 欢迎star~ 大体思路就是画两个圆,一个黏连小球固定在一个点上,一个气泡小球跟随手指的滑动改变坐标.随着两个圆间距越来越大,黏连小球半径越来越小.当间距小于一定值,松开手指气泡小球会恢复原来位置:当间距超过一定值之后,黏连小球消失,气泡小球

JS仿iGoogle自定义首页模块拖拽特效的方法

 这篇文章主要介绍了JS仿iGoogle自定义首页模块拖拽特效的方法,实例分析了页面的布局及拖拽的实现技巧,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了JS仿iGoogle自定义首页模块拖拽特效的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh

Android自定义ListView实现仿QQ可拖拽列表功能_Android

我们大致的思路,其实是这样子的,也是我的设想,我们可以先去实现一个简单的ListView的数据,但是他的Adapter,我们可以用系统封装好的,然后传递进去一个实体类,最后自定义一个listview去操作,所以我们先把准备的工作做好,比如? list_item.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.a

ArcGIS JS 学习笔记2 实现仿百度的拖拽画圆

原文:ArcGIS JS 学习笔记2 实现仿百度的拖拽画圆 一.前言       吐槽一下,百度在国内除了百度地图是良心产品外,其他的真的不敢恭维.在上一篇笔记里,我已经实现了自定义的地图测量模块.在百度地图里面(其他地图)都有一个周边搜索的功能,拖拽画一个圆,然后以圆半径进行搜索(也就是缓冲区╮(╯_╰)╭).   这次的目标,就是要山寨这个拖拽画圆的功能,我先放一个效果图.   二.开始山寨 我们先想一想要实现这个功能需要哪些步骤. 拖拽 画圆 通知拖拽结束 2.1 实现拖拽     关于拖

JS仿iGoogle自定义首页模块拖拽特效的方法_javascript技巧

本文实例讲述了JS仿iGoogle自定义首页模块拖拽特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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

Windows界面编程第七篇 文件拖拽(文件拖放)

本文配套程序下载地址为:http://download.csdn.net/detail/morewindows/5128654 转载请标明出处,原文地址:http://blog.csdn.net/morewindows/article/details/8634451 欢迎关注微博:http://weibo.com/MoreWindows   前面已经有六篇文章介绍了Windows界面编程,目录如下: 1. <Windows界面编程第一篇位图背景与位图画刷> 2. <Windows界面编程