问下网易博客的那种拖动效果是怎么实现的

Question

如题,希望大家能告诉我下那个是用什么开发的,应该怎么去做.如果有示例最好.

Answer 1

chinaren怎么了？我过段时间也可能要做这个效果，用webpart不太放心。所以打算参考http://www.cctv.com，把里面的js剽出来。哈哈

Answer 2

main.css
-------------
 #main
{
 TABLE-LAYOUT:fixed; border:1px solid #ccc;
 }
 
 #main td 
{
VERTICAL-ALIGN: top; WIDTH: 32% 
}.module{
width:100%;
position:relative;
border:1px solid #ccc;
margin-bottom:10px;
}.module .title{
border-top:5px solid #ccc;
background-color:#f5f5f5;
font-size:13px;
color:#990000;
width:100%;
}.module .content {
padding:5px;
}.block {
width:1px; height:1px; position:relative; overflow:hidden;
}#ghost {
border:2px dashed #990000;
position:absolute;
display:none;
top:0px;
left:0px;
margin-bottom:10px;
}
-------------------------------------------
-drag.js
-----------
if (typeof getElementById!="function") {
   var getElementById = function (id) {
   if   (typeof(id)=="object") return id;
   if   (document.getElementById(id)) { return document.getElementById(id); } 
     else { throw new Error(id +" argument error, can not find \"" +id+ "\" element"); }
    }
 }
  // 获取一个element的offset信息，其实就是相对于Body的padding以内的绝对坐标
  function getElCoordinate (e) {
   var t = e.offsetTop;
   var l = e.offsetLeft;
    var w = e.offsetWidth;
   var h = e.offsetHeight;
   while (e=e.offsetParent) {
     t += e.offsetTop;
     l += e.offsetLeft;
   }; return {
     top: t,
     left: l,
     width: w,
     height: h,
     bottom: t+h,
     right: l+w
   }
 }
 
 var guozili = window.guozili || {}; 
 //整个table布局对象
 guozili.dragLayout = function(cfg) {
      this.targetId = cfg.targetId;
      //推拽完成时的回调函数，可以进行ajax提交
      this.onEnd = cfg.onEnd;
      this.init.apply(this);
  };
  
 guozili.dragLayout.prototype = {
      //初始化，读取每列下面的推拽模块div，并且放入dragArray数组中
      init : function() { with(this) {
         target = getElementById(this.targetId);
          rows = target.tBodies[0].rows[0];
           column = rows.cells;
           this.dragArray = new Array();
           var counter = 0;
           for (var i = 0; i < column.length; i ++ ) {
               var ele = column[i];
              
               for( var j = 0; j < ele.childNodes.length; j ++ ) {
               var  ele1 = ele.childNodes[j];
               if  (ele1.tagName == "DIV" && ele1.getAttribute("mid")) {
                  dragArray[counter] = new guozili.dragModule(ele1, this);
                  counter++ ;
              }
          }
          
      }
      }
      }
  };
  //拖拽模块div对象
  guozili.dragModule = function(ele, parent) {
      //对应的div拖拽元素
      this.ele = ele;
      //父对象，即dragLayout对象
      this.parent = parent;
      //标题栏，用于鼠标拖拽
      this.title = this.ele.childNodes[0];
      //计算拖拽element的坐标
      this.eleLeft = getElCoordinate(this.ele).left;
      this.eleTop = getElCoordinate(this.ele).top;
      //记录原先的邻居节点，用来对比是否被移动到新的位置 
      this.origNextSibling = ele.nextSibling;
     this.init.apply(this);
  };
  
  guozili.dragModule.prototype = {
      init : function() { with(this) {
         var _self = this;
         // 获取移动的时候那个灰色的虚线框 
         ghostLayer = getElementById("ghost");
         //鼠标按下时推拽开始
          title.onmousedown = function (event) {
                _self.dragStart(event);
          }
          title.style.cursor = "move";
  
      }
      },
      //开始拖拽设定一些位置信息
      dragStart: function (evt) { with(this) {
         var _self = this;
         evt  = evt?evt:window.event;
 
         var postion = getElCoordinate(ele)
         //鼠标相对于浏览器的位置减去元素的位置
        //得出鼠标相对于元素的相对位置，便于拖拽时计算元素的新位置
        x = evt.clientX - postion.left;
       y = evt.clientY - postion.top;
       
       //绝对位置，top和left就起作用了,就可以推拽了
      ele.style.position = "absolute";
        ele.style.top = postion.top;
        ele.style.left = postion.left;
         ele.style.zIndex = 100;
         
       //将那个灰框设定得与正在拖动的对象一样高
         ghostLayer.style.position = "relative";
         ghostLayer.style.display = "block";
        ghostLayer.style.height = postion.height;
        ghostLayer.style.width = postion.width;
       //把灰框放到这个对象原先的位置上 
       ele.parentNode.insertBefore(ghostLayer, ele.nextSibling);
      
       //鼠标按下再移动的事件，鼠标移动，元素也跟着走
        document.onmousemove = function (event) { _self.drag(event); }
         //释放鼠标的事件
        document.onmouseup   = function (event) { _self.dragEnd(event);   }
     }
   },
     //拖拽时实现元素跟鼠标走
    drag: function (evt) { with(this) {
        var _self = this;
         evt  = evt?evt:window.event;
        //计算元素的新的位置
        ele.style.left = evt.clientX - x;
        ele.style.top = evt.clientY - y;        
       ele.style.filter = "alpha(opacity=70)" ;
         ele.style.opacity = 0.7 ;
       //被拖拽到的新的元素（当然也可以是原来那个） 
       var found = null; 
        //最大的距离
          var max_distance = 10000;
        // 遍历所有的可拖拽的element，寻找离当前鼠标坐标最近的那个可拖拽元素，以便前面插入         
        for (var i = 0; i < parent.dragArray.length; i++)
         {
             var dragObj = parent.dragArray[i];
            //利用勾股定理计算鼠标到遍历到的这个元素的距离 
            var distance = Math.sqrt(Math.pow(evt.clientX - dragObj.eleLeft,2) + Math.pow(evt.clientY - dragObj.eleTop, 2));
                        
           if (isNaN(distance)){
                continue ;
           }
             //如果更小，记录下这个距离，并将它作为found 
            if (distance < max_distance) {
                max_distance = distance;
                 found = dragObj;
             }
            
      }
      //找到落脚点就先把灰框插进去，我们看到的那个灰框停靠的特效
       if  (found != null && ghostLayer.nextSibling != found.ele) {
            found.ele.parentNode.insertBefore(ghostLayer, found.ele);
           
         }
     }
    },
    //鼠标释放时推拽完成
    dragEnd: function (evt) { with(this) {
        var _self = this;
         evt  = evt?evt:window.event;
         
       document.onmousemove = null;
      document.onmouseup   = null;
        //把拖拽时的position=absolute和相关的那些style都消除 
       ele.style.position = "relative";
         ele.style.filter = "";
      ele.style.opacity = "";
        ele.style.zIndex = "";
       ele.style.left = "";
        ele.style.top = "";
      //将灰框隐藏起来
        ghostLayer.style.display = "none";
       
         //如果现在的邻居不是原来的邻居了后者邻居就是它本身 
         if (ghostLayer.nextSibling != origNextSibling && ghostLayer.nextSibling != this.ele) {
             //把被拖拽的这个节点插到灰框的前面 
             ghostLayer.parentNode.insertBefore(ele, ghostLayer.nextSibling);
             //从新初始化可推拽元素对象，可以设定它们的新位置，为下面的拖拽操作做准备
             parent.dragArray = null;
             parent.init();
             //回调函数，拖拽完成可对dragArray进行处理
             parent.onEnd.call(this, parent.dragArray);
             
         }
         
         
     }
     }
 };

Answer 3

--------------------
drag.htm
---------------------
<!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>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title>博客推拽布局示例</title>
 <link href="main.css" rel="stylesheet" type="text/css" />
 <script src="drag.js" language="javascript"></script>
</head>
 <body>
<div id="modules"> 
    <table id="main" cellspacing="10" border="0" width="98%" align="center"> 
        <tr> 
            <td id="c1">
                <div class="module" mid="1">
                    <div class="title">title1</div>
                   <div class="content">content1</div>
                </div>                
                <div class="module" mid="4">
                    <div class="title">title4</div>
                    <div class="content">content4</div>
                </div>
               <div style="display:inline" mid="|"><div></div></div>
            </td> 
            <td id="c2" > 
                 <div class="module" mid="2">
                    <div class="title">title2</div>
                    <div class="content">content2</div>
                </div>
                <div style="display:inline" mid="|"><div></div></div>
            </td> 
           <td id="c3" > 
                 <div class="module" mid="3">
                    <div class="title">title3</div>
                    <div class="content">content3</div>
                </div>
                <div style="display:inline" mid="|"><div></div></div>
            </td> 
       </tr> 
    </table>
    <div id="ghost"></div> 
</div> 
布局顺序为：<span id="order" />
<script>
    //实例化一个dragLayout对象
    var dragObj = new guozili.dragLayout({
        targetId: "main",
        //dragArray为拖拽完后新的dragModule对象
        onEnd: function(dragArray) {        
            var order = "";
            for(var i in dragArray)        
            {
                order += dragArray[i].ele.getAttribute("mid") + " ";
           }
            
            getElementById("order").innerText = order;
            //或者进行ajax提交
        }        
        
    });
    
</script>
</body>
</html>

Answer 4

Feiin有没有例子,发我邮箱一份,[email protected]

Answer 5

用 xmlHttpRequest 把信息提交到服务器就行啊。顺便问一下，能不能把例子也发我一份啊？[email protected]    :>