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

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

先贴张别人的效果图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不是白学，同时还能加深印象，最重要的一点是若能有大神看到，顺带指点我这个超级小白一二，那岂不美哉！小白先撤做后台代码去。