用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;
})()