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

Question

本帖最后由 torontosky 于 2014-05-29 09:32:15 编辑

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

不知道这样满足不满足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 M = false;//判断鼠标是否按下
var D = false;//判断DIV是否创建

window.onmousedown = function(e){
if (D == false) {
M = true;
sx = e.pageX;
sy = e.pageY;
} };

window.onmousemove = function(e){
if (M == true) {
$("div[m='1']").remove();
ex = e.pageX;
ey = e.pageY;
createDiv();

}
};
window.onmouseup = function(e){
M = false;
D = true;

};

//点击div外取消
window.onclick = function(e){
if (e.pageX < sx || e.pageX > ex || e.pageY < sy || e.pageY > ey){
$("div[m='1']").remove();
D = 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();//可拖动
};

Answer 5

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