Сложности с drag and stop, и crop img
 

Недавно поставили интересную задачу с которой как выяснилось справиться сам я не могу. А задача такая существует страница создания макета из картинок.

Картинки в макет грузятся заранее...
На самой страницы макета картинки нужно передвигать, и иметь возможность изменять их размер....

Вот что у меня получилось

http://eboard.technologik.ru/create.php?p=128

1) Проблема в том что я могу только уменьшать размер картинки
2) вторая проблема в том что разрешение экрана для которого все это нужно 1080 на 1920 и человек перемещая картинки на своем ноутбуке мало вероятно что поймет куда нужно перетащить картинку чтобы в дальнейшем она нормально отображалась на его экране в 1080 на 1920
в связи с этим я думал о не большем фрейме в верхнем углу экрана который был грузил в себя миниатюру данного экрана , или о возможности создать разметку( в виде картинки), пусть будет неудобно, но облегчит задачу....

Помогите доделать данную задачу.... (готов заплатить в разумных пределах)

все исходники готов предоставит :

вот сама страница :

// вывод всех картинок из базы данного макета, внутри //div(передвижение)

<?php  
$id_maketa =$_GET['p'];                                     
include ('blocks/bd.php'); 
$result2 = mysql_query("SELECT * FROM cartinki WHERE id_maketa='$id_maketa'");
$myrow2 = mysql_fetch_array($result2); 


do {
list ($do, $razre) = split ('[.]', $myrow2['name']);


printf ("



<div id='drag%s' class='dv1' onclick='dd(drag%s)' widht='%spx' hieght='%spx' style='top:%spx; left:%spx; position: absolute;'>
<img  id ='%s'  src='%s'   width='%spx' height='%spx'  />
<input type='button' value='Изменить' onclick='CreateSize(%s)' /></div>
",$myrow2['id'],$myrow2['id'],$myrow2['sir'],$myrow2['vis'],$myrow2['sverhy'],$myrow2['sboky'],$myrow2['id'],$myrow2['url'],$myrow2['sir'],$myrow2['vis'],$myrow2['id']); 

}

while ($myrow2 = mysql_fetch_array ($result2));	

	   
	?>

//вот скрипт для crop

<script type="text/javascript">
	//<![CDATA[
function CreateSize(ids) {	
	cropresizer.getObject(ids).init({
		saveProportions : true,
		
		onUpdate : function() {
			var sirka = this.iWidth;
			var visota = this.iHeight;
				
				
var id = ids;

	$.ajax({
                type: "POST",
                url: "updatas2_img.php",
               data: ({sirka:sirka,visota:visota,id:id}),
                // Âûâîäèì òî ÷òî âåðíóë PHP

        });	  
						
				
				}
				
	});
}
	//]]>
	</script>

// скрипт для drop

<script type="text/javascript">
function dd(lop){
 
 $(lop).draggable({
    cursor: "move",
    stop: function(event, ui) {
var top =  ui.offset.top;
var lefttt = ui.offset.left;
var id = this.id;

	$.ajax({
                type: "POST",
                url: "updatas_img.php",
               data: ({top:top,lefttt:lefttt,id:id}),
             
                success: function(html) {

alert(html);
						
				
	
						
                }
        });	  

	 alert("Niauoea: " + event.type + 
  	        "\n\ntop: " + ui.offset.top + 
  	        " px\nleft: " + ui.offset.left + 
  	        " px"+this.id);
  	}
  });
};
</script>