[Moloch]

с position:absolute вообще все печально становится =( Вот код

<div id="wrapper">
		<div class="container">
		   
		</div>
		 <p><button id="dissect">Разрезать картинку</button></p>
		 <p><button id="join">Собрать картинку</button></p>
	</div>
	<div class="coord">
		<span class="number">1</span>
		<span class="x">2</span>
		<span class="y">3</span>
	</div>

<style type="text/css">
 	.container+p {
 		clear: both;
 	}
 	.container {
 		background: url('1.png') no-repeat;
 		width: 646px;
 		height: 909px;
 		background-size:contain;
 		position: relative;
 	}
 	.coord span {
 		display: block;
 		font-size: 1.5em;
 	}
 	</style>

$(function(){

		var defaultCoords = [];
		function dissectMyFigure (num) {
			   	var el = $('.container');
			   	for (var i =0;i < num;i++) {
			   		el.append('<div class = "segment"></div>')
			   	}
			   	var segment = $('.segment');
			   	segment.css({'border':'1px solid black','float':'left','box-sizing':'border-box','background-image':'url("1.png")', 'overflow':'hidden'});

			   	//segment.draggable();
			   	
			   	segment.width(function(i,w){
			   			w = el.width()/num*3;
			   			return w;
			   		});
			   		
			   	segment.height(function(i,h){
			   			h = el.height()/num*3;
			   			return h;
			   		});

			   	el.css({'background':'transparent'});

			   	segment.each(function(indx,self){
			   	 	elm=$(self);
			   	 	var pos_x=elm.position().left;
			   	 	var pos_y=elm.position().top;
			   	 	defaultCoords[indx] = {pos_x :pos_x,pos_y :pos_y};
			   	 	elm.css({'background-position-x':'-'+pos_x+'px','background-position-y':'-'+pos_y+'px',})
			   	 	//console.log('для '+indx+'элемента'+'x :'+pos_x+', y :'+pos_y);
			   	 	
			   	 	elm.draggable({
			   	 		start: function () {
			   	 			$('.number').text('сегмент под номером: '+indx);
			   	 		},

				        drag: function() {
				            $('.x').text("По Х: "+$(this).offset().left);
				            $('.y').text("По У: "+$(this).offset().top);
				        }
			   	 	//console.log('координаты '+indx+' элемента по Х '+ elm.position().left +'по У'+elm.position().top);
			   		});
			   	 });
			};

			   $('#dissect').on('click.dissectMyFigure', function() {
	        		dissectMyFigure(9);
	        	});
			   $('#join').on('click.joinMyFigure', function() {
	        		

	        		$('.segment').each(function(indx,s){
	        			var e=$(s);
	        			//e.draggable("destroy");
	        			e.animate({
	        				left:defaultCoords[indx]["pos_x"],
	        				top:defaultCoords[indx]["pos_y"]
	        			},2000, function(){
	        				e.remove();
	        				$('.container').css('background-image','url("1.png")');
	        			});
	        			//e.css({'left':defaultCoords[indx]["pos_x"]+'px','top':defaultCoords[indx]["pos_y"]+'px'});
	        			//e.offset({left: defaultCoords[indx]["pos_x"],top: defaultCoords[indx]["pos_y"] });
	        			
	        		});
	        	});
			
	 	});