baozhangfang/WebRoot/WEB-INF/jsp/house/buildingEdit.jsp

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%String basePath = request.getScheme()+ "://" + request.getServerName() + ":" +request.getServerPort() + request.getContextPath(); %>
<style>
.left {
	width: 378px;
	height:150px;
	overflow:hidden;
	border:1px solid #898989;
	float: left;
}

.right {
	float: left;
	margin-left: 10px;
}

.unit_item {
	float:left;
	margin:2px;
	height: 30px;
	line-height: 30px;
	font-size: 12px; font-family : arial, "Microsoft Yahei", sans-serif;
	text-align : center; background : #528B8B;
	color: #444;
	width: 50px;
	background: #528B8B;
	font-family: arial, "Microsoft Yahei", sans-serif;
	text-align: center;
}

.house_item {
	float:left;
	margin:2px;
	height: 30px;
	line-height: 30px;
	font-size: 12px;
	font-family: arial, "Microsoft Yahei", sans-serif;
	text-align: center;
	background: #5CACEE;
	color: #444;
	width: 50px;
}

.item {
	float:left;
	margin:2px;
	height: 30px;
	line-height: 30px;
	font-size: 12px;
	font-family: arial, "Microsoft Yahei", sans-serif;
	text-align: center;
	background: #5CACEE;
	color: #444;
	width: 50px;
}

.right td {
	height: 34px;
	width: 54px;
	line-height: 34px;
	font-size: 12px;
	font-family: arial, "Microsoft Yahei", sans-serif;
	background: #ddd;
	color: #444;
	text-align: center;
	padding: 0px;
}

.right td.drop {
	background: #ddd;
	width: 50px;
}

.floor {
	width: 50px;
	height: 34px;
}

.drop {
	width: 50px;
	height: 34px;
}

.item_copy {
	float:left;
	margin:2px;
	height: 30px;
	line-height: 30px;
	font-size: 12px;
	font-family: arial, "Microsoft Yahei", sans-serif;
	text-align: center;
	background: #5CACEE;
	color: #444;
	width: 50px;
}
</style>
<div style="float:left;margin-top:10px;margin-left:10px;width: 378px; margin-right: 10px;font-size: 12px;font-family: arial,'Microsoft Yahei', sans-serif;">
	<div style="height: 35px;line-height: 35px;border:1px solid #898989;float: left;background-color: #f0f0f0;width: 378px;font-size: 12px;">
		<div style="float: left;margin-left: 10px;">层数<input type="text" id="rows" style="width:50px;" value="5"></div>
		<div style="float: left;margin-left: 10px;">每层最大户数<input type="text" id="cols" style="width:50px;" value="6"></div>
		<div style="float: left;margin-left: 10px;">平面图<input type="checkbox" id="maptype"></div>
		<div style="float: left;margin-left: 10px;height: 35px;line-height: 35px;margin-top: 8px;"><input type="button" id="layer_btn" value="生成表格"></div>
	</div>
	
	<div style="margin-top:10px;color:#636363;margin-left: auto;margin-right: auto;width:100%;text-align: center;height: 34px; line-height:34px; font-size: 16px;font-weight: bolder;border:1px solid #898989;border-bottom:0px; float: left;background-color: #f0f0f0;">
		<span style="background-image: url('images/building_1.png'); background-repeat: no-repeat; width: 18px;">&nbsp;&nbsp;&nbsp;&nbsp;</span>
		<span>单元</span>
	</div>
	<div id="unitArea" class="unit" style="width: 378px;min-height:34px;border:1px solid #898989;float: left;background-color: #f0f0f0;">
	    
	</div>
	
	<div style="color:#636363; margin-top:15px;margin-left: auto;margin-right: auto;width:100%;text-align: center;height: 34px; line-height:34px; font-size: 16px;font-weight: bolder;border:1px solid #898989;border-bottom:0px; float: left;background-color: #f0f0f0;">
		<span>房号(<span id="houseTotal"></span>)</span>
	</div>
	<div id="house" class="left">
	</div>
	
	<div class="copy" style="width: 378px;min-height:34px;border:1px solid #898989;float: left;margin-top: 10px;">
	</div>
</div>

<div class="right">
    <div style="margin-top:10px; margin-left: auto;margin-right: auto;height:34px;line-height:34px; text-align: center;font-size: 16px;font-weight: bolder;color:#636363;background-color: #f0f0f0;border:1px solid #898989;font-family: arial, 'Microsoft Yahei', sans-serif;">
    	<span style="background-image: url('images/building_1.png'); background-repeat: no-repeat; width: 18px;">&nbsp;&nbsp;&nbsp;&nbsp;</span>
    	<span id="edit_buildingTitle"></span>楼型图
    </div>
    <div id="layer_edit_tb" style="width:420px;height:280px; overflow: scroll;border:1px solid #898989;border-top:0px;"></div>
    <div>
    	<span style="font-family: arial, 'Microsoft Yahei', sans-serif;font-size: 14px;font-weight: bolder;">备注：</span>
    	<textarea id="edit_remark" rows="2" cols="50" style="border:1px solid #898989;margin-top: 5px;">左东右西</textarea>
    </div>
</div>
<script type="text/javascript">
//绘制楼层图
function drwaeLayer(maptype){
	$("#layer_edit_tb").find("td.drop").each(function(i,n){
		
		var obj = $(n);
		if(obj.html() != ""){
			$("#house").append(obj.html().replace("house_item","item"));
			$('.left .item').draggable({
    			revert:true,
    		    proxy:'clone'
    		});
		}
	});
	
	$("#layer_edit_tb").empty();
	$("#unit_tb").empty();
	var rows = $("#rows").val();
	var cols = $("#cols").val();
	var tableHtml = "";
	for(var i =Number(rows)+1;i>=1;i--){
		tableHtml +='<tr>';
		for(var j =1;j<=Number(cols)+1;j++){
			if(i == (Number(rows)+1)){
				if(j>1){
					tableHtml +='<td class="unit" id=unit_'+(j-1)+'>'+(j-1)+'</td>';
				}else{
					tableHtml +='<td></td>';
				}
			}else{
				if(i>0 && j ==1){
					if(maptype == 1){
						tableHtml +='<td class="floor">'+i+'</td>';
					}else{
						tableHtml +='<td class="floor">'+i+'楼</td>';
					}
				}else{
					tableHtml +='<td class="drop" id=floor_'+ i +'_'+(j-1)+' ></td>';
				}
			}
		}
		tableHtml +='</tr>';
	}
	$("#layer_edit_tb").append(
		'<table style="width:'+(54*(Number(cols)+1)+Number(cols)+1)+'px;border-spacing: 1px;">'+
		   tableHtml+
		'</table>'
	);
	
	/**单元右边可放置*/
	$('.right td.unit').droppable({
	    accept: '.unit_item',
	    onDrop:function(e,source){
	        $(this).removeClass('over');
            var c = $(source).clone().addClass('unit_assigned');
            //清除原来的，更换新的
            $(this).empty().append(c);
            c.draggable({
                revert:true
            });
	    }
	});
	
	/**房号右边可放置*/
	$('.right td.drop').droppable({
	    accept: '.item,.item_copy',
	    onDragEnter:function(e,source){
            $(source).draggable('proxy').css('border','1px solid red');
            $(source).removeClass('trash');
        },
        onDragLeave:function(e,source){
        	$(source).removeClass('trash');
        },
        onDrop:function(e,source){
        	if(($(this).html() == '')){//判断是否重复
        		$(source).removeClass('item');
        		$(source).removeClass('item_copy');
	        	$(source).addClass('house_item');
	            $(this).append(source);
        	}else{
        		$("#house").append($(this).html().replace("house_item","item"));
        		$('.left .item').draggable({
        			revert:true,
        		    proxy:'clone'
        		});
        		$(this).empty();
	        	$(source).removeClass('item');
	        	$(source).addClass('house_item');
	            $(this).append(source);
        	}
        }
	});
	
}
$(function(){
	//单元可拖拽
	$('.unit .unit_item').draggable({
	    revert:true,
	    proxy:'clone'
	});
	
	//房号拖地
	$('.left .item').draggable({
		revert:true,
	    proxy:'clone'
	});
	
	//单元可放置
	$('.unit').droppable({
		accept:'.unit_assigned',
		onDrop:function(e,source){
			$(source).remove();
		}
	});
	
	//复制区域可放置
	$('.copy').droppable({
		accept:'.item',
		onDrop:function(e,source){
			var c = $(source).clone().removeClass("item").addClass('item_copy');
            $(this).append(c);
            $('.copy .item_copy').draggable({
        		revert:true,
        	    proxy:'clone'
        	});
		}
	});
	
	//房号可放置
	$('.left').droppable({
		accept:'.assigned , .house_item',
		onDragEnter:function(e,source){
            $(source).draggable('proxy').css('border','1px solid red');
            $(source).removeClass('trash');
        },
		onDragLeave:function(e,source){
			$(source).draggable('options').cursor='not-allowed';
		},
		onDrop:function(e,source){
			$(source).removeClass('house_item');
        	$(source).addClass('item');
	        $(this).append(source);
		}
	});
	
	drwaeLayer();
	
	$("#layer_btn").click(function(){
		var maptype = 0;
		if($("#maptype").attr('checked') == "checked"){
			maptype = 1;
		}
		drwaeLayer(maptype);
	});
	
	
});
</script>