anchor.diff:  			<textarea id="sandbox_screen" ></textarea>
   			<div id="sandbox_hidden" style="display:none;" data-my-obj-id="-1"></div>
   		</section>
  -		<section id="basic_menu" class="menu_bar float_menu header_menu" style="position:absolute; top:50px;z-index:101;right:0px;width:107em; height:11em;border-radius:20px;" >
  -			<label for="ValTag">Tag  </label><input type="text" placeholder="tag tag*num like div>div*3" id="ValTag" class="autoExtend" style="width:15em; ime-mode:disabled;" value="table#hoge>\0+\1" /><br />
  -			<label for="TagHld">Hlds </label><input type="text" placeholder="key0:tr>th*4;key1:tr>td*4;" id="TagHld" class="autoExtend" style="width:15em; ime-mode:disabled;"  value="\0:thead>tr>th*4;\1:tbody>tr*4>th+\2;\2:td.test*3;" /><br />
  -			<label for="ValArrayJSON">vals  </label><input type="text" placeholder="val array JSON" id="ValArrayJSON" class="autoExtend" style="width:15em" /><br />
  -			<label for="ValPropJSON" >props </label><input type="text" placeholder="{&quot;style&quot;:&quot&quot;}" id="ValPropJSON" class="autoExtend json_val" style="width:15em" value="{&quot;table&quot;:{&quot;style&quot;:&quot;border-collapse:collapse;background-color:white;table-layout:fixed;&quot;},&quot;td,th&quot;:{&quot;style&quot;:&quot;border:1px solid black;&quot;},&quot;th&quot;:{&quot;style&quot;:&quot;color:red;&quot;}}" /><br />
  -<input type="button" class="menu_button" value="Ins" id="FuncInsElement" /><input type="button" class="menu_button" value="Reg" id="FuncRegElement" />
  +		<section id="part_list_bar" class="menu_bar side_menu_bar float_menu header_menu" style="position:absolute; top:180px;z-index:101;right:0px;width:1280px;border-radius:20px;overflow:auto;" >
  +			<span>part_list<input id="part_list_reg" type="button" value="Reg"/><input id="part_list_name" type="text" value=""/>
  +				<select id="part_list_select"></select><input id="part_list_del" type="button" value="Del" style="float:right;" /></span>
  +			<ul id="part_list"></ul>
  +		</section>
  +		<section id="prop_list_bar" class="menu_bar side_menu_bar float_menu header_menu" style="position:absolute; top:360px;z-index:101;right:0px;width:1280px;border-radius:20px;overflow:auto;" >
  +			<span>prop_list<input id="prop_list_reg" type="button" value="Reg"/><input id="prop_list_name" type="text" value=""/>
  +				<select id="prop_list_select"></select><input id="prop_list_del" type="button" value="Del" style="float:right;" /></span>
  +			<ul id="prop_list"></ul>
  +		</section>
  +		<section id="basic_menu" class="menu_bar float_menu header_menu" style="position:absolute; top:50px;z-index:101;right:0px;width:1100px; height:7em;border-radius:20px;" >
  +			<label for="ValTag">Tag	 </label><input type="text" placeholder="tag tag*num like div>div*3" id="ValTag" class="autoExtend" style="width:15em; ime-mode:disabled;" value="table#hoge>thead_4+tbody_4" /><br />
  +			<input type="hidden" id="part_list_input" class="json_val" value="" />
  +			<label for="ValArrayJSON">vals	</label><input type="text" placeholder="val array JSON" id="ValArrayJSON" class="autoExtend" style="width:15em" /><br />
  +			<input type="hidden" id="prop_list_input" class="json_val" value="" />
  +			<input type="button" class="menu_button" value="Ins" id="FuncInsElement" /><input type="button" class="menu_button" value="Reg" id="FuncRegElement" />
   		</section>
   		<footer style="position:fixed; bottom:0px;">
   			<section id="footer_menu_bar" class="menu_bar" style="position:fixed;bottom:0px ;left: 0px ;z-index:101; width:100% " >
  
positive.code: 						var raw_my_obj_val = _content.data('my-obj-val');
  						var my_obj_val ;
  						if(typeof raw_my_obj_val === 'undefined' || raw_my_obj_val == ''){
  								if ( content.localName === 'input'){
  										my_obj_val = _content.val();
  								}else if(content.localName === 'textarea'){
  										my_obj_val = _content.text();
  								}else{
  										my_obj_val = "";
  								}
  						}else{
  								my_obj_val = raw_my_obj_val;
  						}
  						var new_prop_s = {};
  						$.extend(true, new_prop_s,_content.data('my-org-prop_s'), target.prop_s);
  						target.prop_s = new_prop_s;
  						if( content.localName === 'input'){//TODO 関数化
  								target.prop_s['value'] = my_obj_val;
  						}else{
  								target.prop_s['html'] = my_obj_val;
  						}
  						tree.upsert(my_obj_id, target);
  				}
  				return tree;
  		};
  
  		/**
  		 * 1pxサイズの操作不能オブジェクトを産まないために､
  		 * Defaultサイズを設定する
  		 * TODO ユーザー指定CSSの設定も調査対象にする
  		 */
  		function set_default_size(temp_prop_s, tag_size_s, my_layer_idx, my_idx){
  				var my_height = DEFAULT_HEIGHT + 25 * (tag_size_s.length - my_layer_idx);
  				var my_width = (DEFAULT_WIDTH + 10 * (tag_size_s.length - my_layer_idx)) * tag_size_s[my_layer_idx];
  				if( typeof temp_prop_s.style === 'undefined'){
  						temp_prop_s.style = 'z-index: '+get_z_index(my_layer_idx)+';height:'+my_height+'px;width:'+my_width+'px;top:'+get_top(my_layer_idx)+'px;left:'+get_left(tag_size_s, my_layer_idx, my_idx)+'px;';
  						//console.log('no style');
  				}else {
  						if( temp_prop_s.style.indexOf('z-index') === -1){
  								temp_prop_s.style +='z-index:'+get_z_index(my_layer_idx)+';';
  						}
  						if( temp_prop_s.style.indexOf('width') === -1){
  								temp_prop_s.style +='width:'+my_width+'px;';
  						}
  						if( temp_prop_s.style.indexOf('height') === -1){
  								temp_prop_s.style +='height:'+my_height+'px;';
  						}
  						if( temp_prop_s.style.indexOf('top') === -1){
  								temp_prop_s.style +='top:'+get_top(my_layer_idx)+'px;';
  						}
  						if( temp_prop_s.style.indexOf('left') === -1){
  								temp_prop_s.style +='left:'+get_left(tag_size_s, my_layer_idx, my_idx)+'px;';
  						}
  				}
  		};
  
  		function get_z_index(my_layer_idx){
  				return 110 + my_layer_idx;
  		};
  		function get_top(my_layer_idx){
  				if( my_layer_idx === 0){
  						return 100;
  				}else{
  						return 10 ;
  				}
  		};
  		function get_left(tag_size_s, my_layer_idx, my_idx){
  				if( my_layer_idx === 0){
  						return 100;
  				}else{
  						return 10 + (DEFAULT_WIDTH + 12 * (tag_size_s.length - my_layer_idx) ) * (tag_size_s[my_layer_idx] * (my_idx));
  				}
  		};
   });
  </script>
  	</body>
  </html>
  
negative.code: 		<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-ui-1.11.1.custom/jquery-ui.min.js"></script>
  		<script type="text/javascript" src="<%=request.getContextPath()%>/js/d3.v3.min.js"></script>
  		<style type="text/css" >
  			* {
  				font-family: 'A-TTC 新ゴ M', 'ヒラギノ角ゴ Pro W3',
  				'Hiragino Kaku Gothic Pro W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif,
  				'ＭＳ ゴシック', monospace;
  			}
  
  			body {
  				margin: 0px;
  			}
  
  			.shadow {
  				padding: 6px;
  				box-shadow: 5px 5px 15px #000000;
  				background: black\9;
  				border-radius: 5px;
  			}
  
  			p,dl {
  				padding: 5px;
  			}
  
  			th {
  				white-space: nowrap;
  				word-break: keep-all;
  			}
  
  			input {
  				border-radius: 5px;
  			}
  
  			input[type=text] {
  				padding: 5px;
  			}
  
  			.shadow:not (:target ) {
  				filter: none;
  				background: rgba(128, 128, 128, 0.1);
  			}
  
  			#content_root {
  				width: 100%;
  			}
  
  			h1,h2,h3,h4 {
  				text-align: center;
  			}
  
  			h1 {
  				font-size: 4em;
  			}
  
  			h2 {
  				font-size: 3em;
  			}
  
  			h3 {
  				font-size: 2em;
  			}
  
  			.csssplite {
  				cursor: pointer;
  				background-position: -20px -4px;
  			}
  
  			.hide_mode_target {
  				width: 100%;
  			}
  
  			.menu_bar {
  				background-color: rgba(221, 221, 221, 0.5);
  				padding: 5px;
  			}
  
  			.side_menu_bar>input {
  				margin: 4px;
  			}
  
  			.objSelected {
  				border:4px dotted red !important;
  				opacity: 0.6;
  			}
  
  			.objSelected * {
  				background-color: orange !important;
  				opacity: 0.6;
  			}
  
  			label {
  				padding-left: 5px;
  				padding-right: 5px;
  				white-space: nowrap;
  			}
  
  			.snap {
  				background-color: white;
  				border: 1px dotted gray;
  			}
  
  			#header_menu_bar , #sub_header_menu_bar{
  				padding-left:60px;
  			}
  			.display_none{
  				display : none;
  			}
  			.menu_button{
  				margin:10px;
  			}
  			
  		</style>
  	</head>
  	<body>
  		<header>
  			<section id="header_menu_bar" class="menu_bar hide_mode_target" data-fire-key-code="escape" style="position:fixed;top:0px ;left: 0px ;z-index:101;" >
  
  			</section>
  			<section id="sub_header_menu_bar" class="hide_mode_target menu_bar" data-fire-key-code="escape"	 style="position:fixed;top:0px ;left: 0px ;z-index:101; display:none;" >
  				<input type="button" value="Save" id="FuncSave" />
  				<input type="button" value="Load" id="FuncLoad" />
  				<input type="text" id="saved_serialized"	placeholder="click save => The data comes here" />
  				<select id="history" ></select>
  			</section>
  		</header>
  		<section id="screen" style="position:absolute; top:44px;bottom:44px;z-index:100;background-color:LemonChiffon;width:100%; height:1440px;" data-my-obj-id="0"></section>
  		<section id="side_menu_bar" class="menu_bar side_menu_bar float_menu header_menu" style="position:absolute; top:540px;z-index:101;right:0px;width:20%; height:30%;border-radius:20px;" >
  			<input type="button" value="Del" id="FuncDeleteElement" /><br />
  			<input type="button" value="CxlSel" id="FuncCancelSelected" /><br />
  			<input type="button" value="Copy" id="FuncCopyElement" /><br />
  