Joomla!-开源天空

2009-01-10
您所在的位置： 首页 > Joomla专栏 > LAMP开发与web 2.0 > Mootools实现具有排版功能的页面拖拽

Mootools实现具有排版功能的页面拖拽

Joomla! 开源天空  作者：joomla  2008-03-29 10:50
  • 摘要：

Mootools 是强大客户端脚本包，可以帮助我们轻松的实现很多客户端的功能。最近由于要实现在线阅读器，我非常不了解脚本，基本上很少写脚本的人，也接触了一下，几个小时出了一个排版功能拖动原型，Joomla!选择Mootools作为客户端开发平台真是英明啊！

我的拖动代码如下：

<html>
<head>
 <title>test drag</title>
 <script type="text/javascript" src="/common/modules/NetLive/js/mootools.js"></script>
 <style type="text/css">
 .module {
  background-color: #ff0000;
  border: 1px dotted;
  cursor: move;
  position: relative;
 }
 .head {
  background-color: #cccccc;
  border: 1px dotted;
  height: 50px;
 }
 .body {
  background-color: #ccffcc;
  border: 1px dotted;
  height: 100px;
 }
 </style>
</head>
<body>
<table border="1" width="100%" groupid="gpBlogger">
<tr id="COLUMNS">
 <td id="COLUMN" width="50%" valign="top" class="COLUMN">
  <div  class="module">
   <div class="head">this is head</div>
   <div class="body">this is body</div>
  </div>
  <div  class="module">
   <div class="head">this is head</div>
   <div class="body">this is body</div>
  </div>
 </td>
 <td id="COLUMN" width="50%" valign="top" class="COLUMN">
  <div  class="module">
   <div class="head">this is head</div>
   <div class="body">this is body</div>
  </div>
  <div  class="module">
   <div class="head">this is head</div>
   <div class="body">this is body</div>
  </div>
 </td>
</tr>
</table>
<div id="blank" style="border:dotted 1px;display:none"></div>
<div id="log"></div>
<script>
 function ifInRect(coord_s, coord_t){
  var x = coord_s.left+coord_s.width/2;
  var y = coord_s.top+coord_s.height/2;
  var ret = false;
  if(x>coord_t.left && x<coord_t.left+coord_t.width){
   if(y>coord_t.top && y<coord_t.top+coord_t.height){
    ret = true;
   }
  }
  return ret;
 }
 $$('.module').each(function(drag){
  var ob_dragmove = new Drag.Move(drag, {
   droppables: $$('.COLUMN')
  });
  ob_dragmove.addEvent('onBeforeStart', function(){
   var left = this.element.getLeft();
   var top = this.element.getTop();
   $('blank').setStyle('display','block');
   $('blank').injectBefore(this.element);
   $('blank').setStyle('height',this.element.getStyle('height'));  this.element.setStyle('width',this.element.getStyle('width'));
   this.element.setStyle('position', 'absolute');
   this.element.setStyle('left',left);
   this.element.setStyle('top',top);
  });
  ob_dragmove.addEvent('onDrag', function(){
   var columns = $$('.COLUMN');
   var break_loop = false;
   for (var j =0 ; j<columns.length && !break_loop ; j++ )
   {
    var item = columns[j];
    if(ifInRect(ob_dragmove.element.getCoordinates(),item.getCoordinates())){
     var modules = item.getElements('.module');
     for (var i =0 ;i< modules.length ;i++ )
     {
      //if(ifInRect(ob_dragmove.element.getCoordinates(),modules[i].getCoordinates())){
      if (ob_dragmove.element.getCoordinates().top < modules[i].getCoordinates().top) {
       $('blank').injectBefore(modules[i]);
       break_loop = true ;
       break;
      }
     }
     //$('blank').setStyle('width',item.getCoordinates().width);
     if (!break_loop) $('blank').injectInside(item);      
    }
   };
  });
  ob_dragmove.addEvent('onComplete', function(){
   ob_dragmove.element.injectBefore($('blank'));
    ob_dragmove.element.setStyle('position', 'relative');
    ob_dragmove.element.setStyle('left', '0');
    ob_dragmove.element.setStyle('top', '0');
    ob_dragmove.element.setStyle('width', '100%');
    $('blank').setStyle('display','none');  
  });
 });
 $$('.COLUMN').each(function(item){
  item.addEvents({
   'over': function(el, obj){
    $('log').appendText('over\n');
   },
   'leave': function(el, obj){
    $('log').appendText('leave\n');
   }
  });
 });
 </script>
</body>
</html>

第一段代码就是引入Mootools，定义了CSS，注意其中的 position:relative ，如果不定义position，Mootools会自动将其定义为absolute，这个应该是必须定义的。

第二段代码是我们要拖动的模块，分为两列，一列两个模块，当然你可以将两列用div实现，而不是用table 。

第三段代码是真正的拖动和排版的代码，实现这样的功能，代码只有这些行，确实Mootools棒极了。具体代码的意义就不说了，还是仔细看看吧。

附件是代码的原文。

Attatchments:
您还没有登录，登录后方能下载，如果您还没有注册，请点击 免费注册
< 前一篇   下一篇 >

  发表您的文章评论

您的姓名 (昵称)
标题:
评分: 很差差一般较好很好
评论:
验证码：
请输入验证码

热点文章

 更多>>