Javascript-форум - Несколько вопросов о jQuery

Доброго времени суток, решил сделать игру на CSS3 + SVG, но без jQuery никуда ведь, поэтому есть несколько вопросов с которыми не могу справиться.
Есть 4 <section> (bg,map,units,ui)
bg - это просто фон
map - интерактивная карта
units - пока не используется
ui - интерфейс
Вот HTML код

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>FrameWarp - плагин для вывода страниц в окнах | Демонстрация для сайта RUDEBOX</title>
        <!-- The stylesheets -->
        <link rel="stylesheet" href="assets/css/styles.css" />
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    
    <body>
      <section class="layer" id="bg">
        
      </section>
      <section class="layer" id="map">
        
      </section>
      <section class="layer" id="units">
        
      </section>
      <section class="layer" id="ui">
        <div class="uihead"></div>
        <div class="uimenu"></div>
      </section>
      
		<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="assets/js/script.js"></script>
        
    </body>
</html>

Тут CSS код

*{
	margin:0;
	padding:0;
}
html{
	background-color:#eee;
	background-image:-moz-radial-gradient(circle closest-corner, #eee 0%, #e0e0e0 100%);
	background-image:-o-radial-gradient(circle closest-corner, #eee 0%, #e0e0e0 100%);
	background-image:-webkit-radial-gradient(circle closest-corner, #eee 0%, #e0e0e0 100%);
	background-image:radial-gradient(circle closest-corner, #eee 0%, #e0e0e0 100%);
}
body{
	font:14px/1.3 'Segoe UI',Arial, sans-serif;
   overflow: hidden;
}
.layer {
   position: absolute;
}
#main {
   background: red;
}
#map {
   background: aqua;
   font-size: 0px;
}
.mapelement {
   background: red;
   display: inline-block;
   width: 63px;
   height: 63px;
   border: 1px solid black;
   border-top: 0px;
   border-left: 0px;
}
#units {
   background: blue;
   display: none;
}
#ui {
   width: calc(100% - 8px);
   height: calc(100% - 8px);
   border: 4px solid orange;
}
.uihead {
   position: absolute;
   width: 100%;
   height: 5%;
   background: yellow;
   top: 0;
}
.uimenu {
   position: absolute;
   width: 100%;
   height: 20%;
   background: yellow;
   bottom: 0;
}

А тут JS

$(function(){

	var mapW = 7;
	var mapH = 5;

	$("#map").width(64*mapW);
	$("#map").height(64*mapH);

	$.each( mapW*mapH, function() {
		$(".mapelement").prependTo("#map");
	})

});

1. Как сделать что бы <section id="map"> был movable? Что бы можно было двигать как карту
2. В js коде я пытаюсь циклом заполнить <section id="map"> элементами .mapelement так как это будут тайлы которые полностью заполняют саму карту. Ширина и высота карты равна установленным значениям умноженным на 64px
тайлы по высоте и ширине тоже равны 64px значит тайлов нужно создать высоту умножить на ширу. Но чего то у меня не вышло создать циклом необходимое количество тайлов внутри карты.