87,902
社区成员
发帖
与我相关
我的任务
分享
.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();//可拖动
};