Drag di un'immagine

[bagnacaoda]

Ciao a tutti, sto cercando di fare un drag & drop di un div.
Il codice funziona, ma il problema è che se il div che cerco di spostare contiene un'immagine anzichè del testo, l'immagine viene evidenziata (penso sia un problema di focus) e viene un effetto orrendo nel dragging.
Qualcuno sa darmi una mano ???

L' html puro

<div id="C" >
    <div id="M">
          [img]mappa.gif[/img]
    </div>
</div>

Lo stile CSS

<style>
#M
{
  	background-color: #EEEEEE;
  	font: Normal 10px Verdana;
  	width: 1600px;
  	height: 800px;
  	padding: 5px;
  	border: Solid 1px #CCCCCC;
  	cursor: Move;
}

#C {
	left:100px;
	top:100px;
	width:800px;
	height:600px;
	border: 3px solid green;
	background: red;
	overflow: hidden;
	/* overflow: visible; */
}
</style>

Lo script:

<script>
	var Giu = true;
	var L, T, X, Y;
	var Wm, Hm, Wc, Hc;
	
	function Coordinate()
	{
	  if (event.srcElement.id == "M")
	  {
		Giu = true;
		document.onmousemove = Muovi;
		
		L = document.getElementById("M").style.pixelLeft;
		T = document.getElementById("M").style.pixelTop;
		X = event.clientX;
		Y = event.clientY;
		
		Wm = document.getElementById("M").offsetWidth;
		Wc = document.getElementById("C").offsetWidth;
		Hm = document.getElementById("M").offsetHeight;
		Hc = document.getElementById("C").offsetHeight;
	  }
	}
	
	function Muovi()
	{
	  if (Giu)
	  {
		var newL = L + event.clientX - X;
		if (newL <= 0  &&  newL >= -(Wm - Wc) )
			document.getElementById("M").style.pixelLeft = newL;
		
		var newT = T + event.clientY - Y;
		if (newT <= 0  &&  newT >= -(Hm - Hc) )
			document.getElementById("M").style.pixelTop = newT;
	  }
	}
	
	function Su() 
	{ 
		Giu = false; 
	}

	document.onmousedown = Coordinate;
	document.onmouseup = Su;
</script>

[longilineo]

per fare il drag and drop puoi usare draggable di jquery ui. Possibilmente già lo sapevi e non ti interessa, altrimenti consideralo, ti semplificherebbe la vita.