如何用鼠标拉出一个div 或span

[来自故乡的风]

我正在做一个时间安排的网页，老板给我看了一个例子，见

http://doodle.com/MsBusy


http://i5.photobucket.com/albums/y165/charleschn/time.jpg

就是有一个日期和时间的二维表格，如果在某一格点击鼠标左键，然后往下拉，就会出现一个逐渐变长的方框。松开鼠标后，这个方框就叠加在这个表格上，以后可以移动或改变大小，也可以取消。请问这个效果用js 或jQuery怎么实现。

谢谢！

[学学你们]

用的什么日历控件？ 一般应该是有Demo的

[KK3K2005]

有起点和终点 推算不出一个 div？

[KeepSayingNo]

你是要做一个类似shedule的东西吧，你去找个日程表控件就可以了

[orzxxx01]

不知道这样满足不满足LZ要求 用到了jquery 和 jqueryUI <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css">

    	.d {
	border: 1px solid blue;
}

var sx, sy, ex, ey;//横坐标和纵坐标，前面是起始点，后面是结束点
		var markM = false;//判断鼠标是否按下
		var markD = false;//判断DIV是否创建
		
		window.onmousedown = function(e){
			if (markD == false) {
				markM = true;
				sx = e.pageX;
				sy = e.pageY;
			}

		};
		
		window.onmousemove = function(e){
			if (markM == true) {
				$("div[m='1']").remove();
				ex = e.pageX;
				ey = e.pageY;
				createDiv();
				
			}
		};
		window.onmouseup = function(e){
			markM = false;
			markD = true;
			
		};
		
		//点击div外取消
		window.onclick = function(e){
			if (e.pageX < sx || e.pageX > ex || e.pageY < sy || e.pageY > ey){
				$("div[m='1']").remove();
				markD = false;
			}
		};
		
		
		function createDiv(){
			var $div = $("<div></div>");
			$div.width(ex - sx);
			$div.height(ey - sy);
			$div.addClass("d");//添加类
			$div.attr("m", "1");//标记
			$(document.body).append($div);
			$div.offset({top:sy,left:sx});
			$div.resizable();//拉伸
   			$div.draggable();//可拖动
		};

[来自故乡的风]

多谢orzxxx01，您的代码非常好用，真是帮了我的大忙。谢谢！ 也谢谢楼上热心回复的朋友。这次分数全给orzxxx01。

[卖水果的net]

把这个站点抓下来，慢慢研究。