JQuery施用

/** Root相关操作 */
(function ($) {
	$.fn.begindesign = function () {
		var obj = this;
		obj.addClass("root");
		// 可选择
		obj.selectable({filter:".component-bg"});
		// 接收拖拽
		obj.droppable({accept:".toolboxitem", drop:function (event, ui) {
			$(this).addControl(ui.draggable[0].component, {x:event.clientX, y:event.clientY});
		}});
		// 鼠标单击
		obj.click(function () {
			//obj.focus();
		});
		// 鼠标移动
		obj.mousemove(function (e) {
			var offsetxy = getAbsPoint(obj[0]);// 画板对于屏幕的觉得位置
			$("#stausbar").html("x=" + (e.clientX - offsetxy.x) + ", y=" + (e.clientY - offsetxy.y));
		});
	};
	/**往目标添加组件, 组件类型, 屏幕pos*/
	$.fn.addControl = function (componentSrc, pos) {
		var obj = this;
		// 新建HTML对象
		var component_bg = $("<div>").addClass("component-bg");
		var component = $("<" + componentSrc.type + ">").addClass("component");
		var component_handle = $("<span>").addClass("component-handle");
		
		// 初始化属性 begin----------------
		var offsetxy = getAbsPoint(obj[0]);// 画板对于屏幕的觉得位置
		// 修正新组件坐标为相对于画板
		pos.x = pos.x - offsetxy.x;
		pos.y = pos.y - offsetxy.y;
		component_bg.css("position", "absolute").css("top", pos.y).css("left", pos.x);
		// 属性
		$.each(componentSrc.attr, function (i, n) {
			component.attr(i, n);
		});
		// 大小
		component_bg.width(componentSrc.size.defaultWidth).height(componentSrc.size.defaultHeight);
		// 初始化属性 end----------------
		// 显示
		component_bg.appendTo(obj);
		component.appendTo(component_bg);
		component_handle.appendTo(component_bg);
		
		// 组件相互存放
		component_bg[0].component = component;
		component_bg[0].component_handle = component_handle;
		component[0].component_bg = component_bg;
		component_handle[0].component_bg = component_bg;
		// 移动
		component_bg.resizable({minWidth:componentSrc.size.minWidth, minHeight:componentSrc.size.minHeight, maxWidth:componentSrc.size.maxWidth, maxHeight:componentSrc.size.maxHeight}).draggable({handle:component_handle});
		component_handle.click(function (e) {
			if (!e.ctrlKey) {
				$(".ui-selected").removeClass("ui-selected");
			}
			$(this)[0].component_bg.addClass("ui-selected");
			// 组件失去焦点
			$(this)[0].component_bg[0].component.blur();
		}).dblclick(function (e) {
			// 组件获取焦点,可编辑状态
			$(this)[0].component_bg[0].component.focus();
		});
	};
})(jQuery);
/**输出信息*/
function info(s) {
	$("#consle").text($("#consle").text() + "\n>> " + s);
}
/**绝对坐标*/
function getAbsPoint(obj) {
	var x, y;
	oRect = obj.getBoundingClientRect();
	x = oRect.left;
	y = oRect.top;
	return {x:x, y:y};
}

/**组件加载*/
(function ($) {
	// 组件defaultSize
	function ds() {
		return {defaultWidth: 70, defaultHeight: 25, minWidth: 20, minHeight: 20, maxWidth: 300, maxHeight: 300};
	}
	// 所有组件
	$.COMPONENTS = [
		// 静态文本
		{
			type: "label", 
			display: "静态文本", 
			ico: "ico/label.bmp", 
			attr: {}, 
			size: ds()
		},
		// 输入框
		{
			type: "input", 
			display: "输入框", 
			ico: "ico/text.bmp", 
			attr: {type: "text"}, 
			size: $.extend(ds(), {defaultWidth: 150, defaultHeight: 25})
		},
		// 按钮
		{
			type: "input", 
			display: "按钮", 
			ico: "ico/button.bmp", 
			attr: {type: "button"}, 
			size: ds()
		},
		// 文本域
		{
			type: "textarea", 
			display: "文本域", 
			ico: "ico/textarea.bmp", 
			attr: {}, 
			size: $.extend(ds(), {defaultWidth: 250, defaultHeight: 120})
		},
		// 下拉框
		{
			type: "select", 
			display: "下拉框", 
			ico: "ico/select.bmp", 
			attr: {}, 
			size: $.extend(ds(), {defaultWidth: 150, defaultHeight: 25})
		},
		// 复选框
		{
			type: "input", 
			display: "复选框", 
			ico: "ico/checkbox.bmp", 
			attr: {type: "checkbox"}, 
			size: ds()
		},
		// 单选按钮
		{
			type: "input", 
			display: "选按钮", 
			ico: "ico/radio.bmp", 
			attr: {type: "radio"}, 
			size: ds()
		}
	];
	
	$.initToolbox = function (designerRoot, render) {
		//var rID = "rID" + Math.round(Math.random() * 10000);
		var tools = [];
		// 加载工具
		for (var i = 0; i < $.COMPONENTS.length; i++) {
			var component = $.COMPONENTS[i];
			var li = $("<li>").addClass("toolboxitem").addClass("ui-widget-header").appendTo(render);
			li.css("background-image", "url(" + designerRoot + "/" + component.ico + ")");
			var display = $("<span>").text(component.display).appendTo(li);
			tools[i] = li;
			li[0].component = component;
			
			li.mousemove(function(e) {
				$(this).addClass("ui-state-highlight").css("background-position", "center left").css("background-repeat", "no-repeat");
			}).mouseout(function(e) {
				$(this).removeClass("ui-state-highlight");
			});
		}
		// 工具拖动
		for (var i = 0; i < tools.length; i++) {
			tools[i].draggable({revert:"invalid", helper:"clone", cursorAt:{cursor:"crosshair", top:0, left:0}});
		}
	};
})(jQuery);