会议管理拖动效果的页面制作1

最新推荐文章于 2024-05-02 18:12:22 发布

weixin_34329187

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量74

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/bobogoodgoodstudy/archive/2013/04/17/3026145.html

版权

记得几个月前，曾经做过会议室预定显示、预定的功能，但是当时是一个彻彻底底小白，啥都不会，别人好的效果也做不出来。近日来通过对jquery和javascript的学习，照样画葫芦的模仿了那个效果。

先贴张别人的效果图

我的思路是这样的，当鼠标点击td时，条件判断设为true同时获得该td，然后拖动时，获得鼠标最后停留的td，最后将这两者之间的td（也就是选中的td）背景色变化。

另外想说句，jquery是个好东西，很好很强大，附上总体代码

html代码

View Code

<!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=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script src="hyxz.js" type="text/javascript"></script>
<style type="text/css">
   *{ margin:0; padding:0}
   #hy_content,#hy_head{ overflow:hidden; width:1000px;}
   #hy_head td{ width:80px; text-align:center; border:1px black solid;}
   th{ width:100px; border:1px black solid}
   #hy_content td{width:19px; background:green; height:30px; padding:0; margin:0}
   #hy_content td:hover{width:19px; background:red; height:30px;}
    </style>
     <script type="text/javascript">
      $(function () { 
      $("#hy_content tr").hytd();
         })
     </script>
</head>

<body>
<div>
    <div id="head">
     <div id="xzhys_all" style=" position:relative; left:150px;top:0px;">
     <span>选择会议室</span>
     <select id="xzhys">
        <option selected="selected">选择会议室</option>       
     </select>
     <div style=" position:absolute; left:300px;  top:0px">
      <span>日期：</span>
      <select id="rq">
        <option selected="selected">2013/4/16</option>       
     </select>
     </div>
     </div>
     
    </div>
    <div id="content">
    <table id="hy_head">
      <tr>
      <th>哈哈</th>
      <td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td>
      </tr>
    </table>
    <table id="hy_content">
      <tr id="hy1">
       <th>会议室1</th>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
      </tr>
      <tr id="hy2">
       <th>会议室2</th>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
      </tr>
      <tr id="Tr1">
       <th>会议室3</th>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
      </tr>
      <tr id="Tr2">
       <th>会议室4</th>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
          <td class="style1"></td><td class="style1"></td><td class="style1"></td><td class="style1"></td>
      </tr>
    </table>
    </div>
    </div>
</body>
</html>

处理拖动时效果的js代码

View Code

(function ($) {
    $.fn.hytd = function () {
        return this.each(function () {
            var moveable = false
            var items = []; //建立数组items来存储td对象
            var items_positon = [];
            var obj_moveover = null;
            var i_begin = null;
            var i_end = null;
            var t = $(this); _t = this;
            function getitems() {
                t.find("td").each(function () {
                    var pos = {};
                    pos.obj = this;
                    pos.left = $(this).offset().left;
                    pos.top = $(this).offset().top;
                    items_positon.push(pos);
                })
            }
            function _mousedown(e) {
                e = e || window.event;
                i_end = null;
                var mouse_left = e.pageX;
                for (var i = 0; i < items_positon.length; i++) {
                    if (mouse_left > items_positon[i].left) { i_begin = i; }
                }
                moveable = true;
            }
            function _mouseup(e) {
                e = e || window.event;
                moveable = false;
            }
            function mousemoveobj(e) {
                e = e || window.event;


                if (moveable) {
                    var mouse_left = e.pageX;
                    for (var i = 0; i < items_positon.length; i++) {
                        if (mouse_left > items_positon[i].left) {
                            //obj_moveover = items_positon[i]; obj_moveover1 = items_positon[i + 1];
                            i_end = i;
                        }

                    }
                }
                if (i_end != null) {
                    for (var i = 0; i < items_positon.length; i++) {
                        if ((i < i_end && i > i_begin) || (i > i_end && i < i_begin) || (i == i_begin && i_begin != i_end)) { $(items_positon[i].obj).css('background', 'yellow'); }
                        else { $(items_positon[i].obj).css('background', 'green'); }
                    }
                }
            }
            var getobj_x = function (obj) {
                var ret = 0;
                while (obj != null) {
                    ret += obj.offsetLeft;
                    obj = obj.offsetParent;
                }
                return ret;
            }

            function init() {
                getitems();
                t.find("td").bind('mousedown', _mousedown).bind('mousemove', mousemoveobj);
                $(document).bind('mouseup', _mouseup);
            }
            init();
        })
    }
})(jQuery);

jquery我用的是1.7.2

写这个一方面说明了这几天javascript和jquery不是白学，同时还能加深印象，最重要的一点是若能有大神看到，顺带指点我这个超级小白一二，那岂不美哉！小白先撤做后台代码去。

转载于:https://www.cnblogs.com/bobogoodgoodstudy/archive/2013/04/17/3026145.html

weixin_34329187

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
会议管理拖动效果的页面制作1

记得几个月前，曾经做过会议室预定显示、预定的功能，但是当时是一个彻彻底底小白，啥都不会，别人好的效果也做不出来。近日来通过对jquery和javascript的学习，照样画葫芦的模仿了那个效果。先贴张别人的效果图我的思路是这样的，当鼠标点击td时，条件判断设为true同时获得该td，然后拖动时，获得鼠标最后停留的td，最后将这两者之间的td（也就是选中的td）背景色变化。另外想说句，j...
复制链接

扫一扫