用jQuery实现可用鼠标创建窗口，用鼠标对窗口进行拖动。
https://jsfiddle.net/r4x1toz3/7/
但是有两个问题不知道怎么解决：
1、创建完元素，，文字会呈被选中状态，每创建一个窗口，所有窗口都会变成选中状态(实际上我没有实现这个，不知道怎么会有这种效果)
2、对元素进行拖动，但实际上拖动会出现禁止的图标，需要点击一下元素才能进行拖动
3、有的时候会莫名的卡？例如创建好窗口(即松开鼠标)窗口大小还会跟着鼠标动；拖动窗口放开鼠标，窗口位置还会跟着鼠标移动？
js代码：
;(function(){
function SmartWin(area){
var _this=this;
this.area=area;//窗口绘制区域
this.dragging=false;//是否拖动
this.startX,this.startY;//鼠标按下时的位置,相对于文档
this.posX,this.posY;//窗口拖动前的位置，相对于父元素
this.diffX,this.diffY//鼠标与窗口的差值
this.hasWin=false;
this.focusWin;
this.stauts;
//area相对于文档的位置
this.aLeft=this.area.offset().left;
this.aTop=this.area.offset().top;
//鼠标按下
this.area.mousedown(function(e){
//无窗口，准备创建新窗口
if($(e.target).is(_this.area)){
_this.startX=e.pageX;
_this.startY=e.pageY;
_this.stauts="create";
var inner='
窗口名称×
\_this.area.append(inner);
var wl=_this.startX-_this.aLeft;
var wt=_this.startY-_this.aTop;
$("#createWin").css({
"left":wl,
"top":wt
})
}
//有窗口
else{
//关闭窗口
if($(e.target).hasClass("smartWin")){
_this.focusWin=$(e.target);
}else{
_this.focusWin=$(e.target).parents(".smartWin");
}
if($(e.target).hasClass("close")){
}
//修改大小
else if($(e.target).hasClass("resize")){
}
//拖动窗口
else{
_this.posX=_this.focusWin.position().left;
_this.posY=_this.focusWin.position().top;
var zindex=$(".smartWin").length-1;
_this.focusWin.css("zIndex",zindex);
//差值
_this.diffX=e.pageX-_this.aLeft-_this.posX;
_this.diffY=e.pageY-_this.aTop-_this.posY;
_this.stauts="drag";
_this.focusWin.attr("id","dragWin");
}
}
//改变窗口大小
if($(e.target).hasClass("resize")){
_this.stauts="resize"
e.stopPropagation();
}
})
//鼠标移动
this.area.mousemove(function(e){
//设置窗口大小位置
if(_this.stauts=="create"){
var ww=e.pageX-_this.startX;
var wh=e.pageY-_this.startY;
$("#createWin").css({
"width":ww,
"height":wh
})
}else if(_this.stauts=="drag"){
console.log(555);
var wl=e.pageX-_this.aLeft-_this.diffX;
var wt=e.pageY-_this.aTop-_this.diffY;
$("#dragWin").css({
"left":wl,
"top":wt
})
}
})
$(document).mouseup(function(){
_this.stauts="";
_this.dragging=false;
_this.focusWin=null;
var cwin=$("#createWin");
var dwin=$("#dragWin");
if(cwin){
cwin.removeAttr("id");
}
if(dwin){
dwin.removeAttr("id");
}
})
}
SmartWin.init=function(objs){
objs.each(function(){
new SmartWin($(this));
})
}
window["SmartWin"]=SmartWin;
})()
)
