好库网 好库网首页 | 我的好库
好饱的专栏

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

发布者:好饱
发布日期:2012/12/27 22:50:08   更新日期:2012/12/27 22:54:50
阅读次数:3037
评分:4.80
介绍:Mootools 是强大客户端javascript脚本包,可以帮助我们轻松的实现很多客户端的功能。
正文:

 

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棒极了。具体代码的意义就不说了,还是仔细看看吧。

 

Mootools官方网站:http://mootools.net

 


评论 [发表评论]
账号 密码 还没帐号呢,现在注册一个?

免责声明:好库网所展示的信息由买卖双方自行提供,其真实性、准确性和合法性由信息发布人负责。好库网不提供任何保证,并不承担任何法律责任。