酷毙的html标签编辑器

心血来潮，写了这个玩具，以后有时间会逐步完善功能，作为前端的自由编辑工具，还是很好玩的。

function insertStyleSheet(styles, styleId) {
    if (!document.getElementById(styleId)) {
        var style = document.createElement("style");
        style.id = styleId;
        (document.getElementsByTagName("head")[0] || document.body).appendChild(style);
        if (style.styleSheet) { //for ie  
            style.styleSheet.cssText = styles;
        } else {//for w3c  
            style.appendChild(document.createTextNode(styles));
        }
    }
}
insertStyleSheet("html{cursor:text;*cursor:auto;100%;height:100%;margin:0;padding:0;}body{100%;height:100%;margin:0;padding:0;}.myFrame{box-shadow:0 0 18px #090;}", "myFrameStyle");

var myDrag = {};
myDrag.originX = myDrag.originY = myDrag.left = myDrag.top = myDrag.mousedown = 0;
myDrag.option = "d";
myDrag.cursor = "default";

//本方法经过一定优化，相对减少系统消耗
function setCursor(e, d) {
    var o = myDrag.currObj;
    if (o) {
        d = d || 3;
        var   w = o.outerWidth()
            , h = o.outerHeight()
            , x = o.offset().left
            , y = o.offset().top;
        if((x - e.pageX) > d || (y - e.pageY) > d || (e.pageX - x - w) > d || (e.pageY - y - h) > d){
            $('body').css("cursor", 'default');
            myDrag.option = 'd';
            return false;//目标外围
        }
        if((e.pageX - x) > d && (e.pageY - y) > d && (x + w - e.pageX) > d && (y + h - e.pageY) > d){
            //$('body').css("cursor", 'move');
            myDrag.option = 'm';
            return false;//目标外围
        }
        var   l = Math.abs(e.pageX - x)
            , t = Math.abs(e.pageY - y)
            , r = Math.abs(x + w - e.pageX)
            , b = Math.abs(y + h - e.pageY);
        if(l < d && t < d){
            $('body').css("cursor", 'se-resize');
            myDrag.option = 'lt';
            return false;//目标左上角
        }
        if(r < d && b < d){
            $('body').css("cursor", 'se-resize');
            myDrag.option = 'rb';
            return false;//目标右下角
        }
        if(r < d && t < d){
            $('body').css("cursor", 'ne-resize');
            myDrag.option = 'rt';
            return false;//目标右上角
        }
        if(l < d && b < d){
            $('body').css("cursor", 'ne-resize');
            myDrag.option = 'lb';
            return false;//目标左下角
        }
        if(l < d){
            $('body').css("cursor", 'w-resize');
            myDrag.option = 'l';
            return false;//目标左
        }
        if(r < d){
            $('body').css("cursor", 'w-resize');
            myDrag.option = 'r';
            return false;//目标右
        }
        if(t < d){
            $('body').css("cursor", 's-resize');
            myDrag.option = 't';
            return false;//目标上
        }
        if(b < d){
            $('body').css("cursor", 's-resize');
            myDrag.option = 'b';
            return false;//目标下
        }
    }
}
function dragDom(e) {
    if (myDrag.option == 'm') {
        myDrag.left += e.pageX - myDrag.originX;
        myDrag.top += e.pageY - myDrag.originY;
        myDrag.currObj.css({ top: myDrag.top, left: myDrag.left });
    } else {
        if (myDrag.option != "d") {
            var o = myDrag.currObj;
            if (myDrag.option == "l") {
                myDrag.left += e.pageX - myDrag.originX;
                o.css({ left: myDrag.left })
                        .width(o.width() - e.pageX + myDrag.originX);
            }
            if (myDrag.option == "t") {
                myDrag.top += e.pageY - myDrag.originY;
                o.css({ top: myDrag.top }).height(o.height() - e.pageY + myDrag.originY);
            }
            if (myDrag.option == "r") {
                o.width(o.width() + e.pageX - myDrag.originX);
            }
            if (myDrag.option == "b") {
                o.height(o.height() + e.pageY - myDrag.originY);
            }
            if (myDrag.option == "lt") {
                myDrag.top += e.pageY - myDrag.originY;
                myDrag.left += e.pageX - myDrag.originX;
                o.css({ top: myDrag.top }).css({ left: myDrag.left })
                        .height(o.height() - e.pageY + myDrag.originY)
                        .width(o.width() - e.pageX + myDrag.originX);
            }
            if (myDrag.option == "rb") {
                o.height(o.height() + e.pageY - myDrag.originY)
                        .width(o.width() + e.pageX - myDrag.originX);
            }
            if (myDrag.option == "lb") {
                myDrag.left += e.pageX - myDrag.originX;
                o.css({ left: myDrag.left })
                        .height(o.height() + e.pageY - myDrag.originY)
                        .width(o.width() - e.pageX + myDrag.originX);
            }
            if (myDrag.option == "rt") {
                myDrag.top += e.pageY - myDrag.originY;
                o.css({ top: myDrag.top })
                        .height(o.height() - e.pageY + myDrag.originY)
                        .width(o.width() + e.pageX - myDrag.originX);
            }
        }
    }
}
$(document).on("click", function (e) {
    var obj = e.originalEvent.srcElement;
    var o = $(obj);
    if ('myFrame' != o.attr('class') && !o.is('body')) {
        if (myDrag.currObj) {
            $(myDrag.currObj).css('border', myDrag.border);
        }
        o.css('position', 'relative').parent().css('position', 'relative');
        myDrag.currObj = o;
        myDrag.border = o.css('border');
        o.css('border', '1px dashed red');
    } else {
     if (myDrag.currObj) {
        $(myDrag.currObj).css('border', myDrag.border);
        myDrag.currObj = null;
     }
   }
    e.stopPropagation();
}).on("mousedown", function (e) {
    if (myDrag.option != "d") {
        myDrag.mousedown = 1;
        var o = myDrag.currObj;
        if (myDrag.option == "m") {
            o.css("cursor", 'move');
        }
        myDrag.left = o.css("left") == 'auto' ? 0 : parseInt(o.css("left"));
        myDrag.top = o.css("top") == 'auto' ? 0 : parseInt(o.css("top"));
        myDrag.originX = e.pageX;
        myDrag.originY = e.pageY;
    }
    e.stopPropagation();
}).on('mousemove', function (e) {
    if (myDrag.mousedown == 0) {
        if (myDrag.currObj) {
            setCursor(e,5);
        }
    } else {
        dragDom(e);
    }
    myDrag.originX = e.pageX;
    myDrag.originY = e.pageY;
    e.stopPropagation();
}).on('mouseup', function (e) {
    myDrag.originX = myDrag.originY = myDrag.left = myDrag.top = myDrag.mousedown = 0;
    if (myDrag.option == "m") {
        $(myDrag.currObj).css("cursor", 'default');
    }
    e.stopPropagation();
}).on('keydown', function (e) {
    if (myDrag.currObj) {
        var o = myDrag.currObj;
        switch (e.which) {
            case 46 :{
                if (confirm('Are you sure to delete it?')) {
                    o.parent().append(o.children());
                    o.remove();
                }
            } break;
            case 37: {
                myDrag.left -= 1;
                o.css({ left: myDrag.left });
            } break;
            case 38: {
                myDrag.top -= 1;
                o.css({ top: myDrag.top });
            } break;
            case 39: {
                myDrag.left += 1;
                o.css({ left: myDrag.left });
            } break;
            case 40: {
                myDrag.top += 1;
                o.css({ top: myDrag.top });
            } break;
            default: break;
        }
        return false;
    }
    e.stopPropagation();
});