心血来潮，写了这个玩具，以后有时间会逐步完善功能，作为前端的自由编辑工具，还是很好玩的。
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();
});