div arratsavel

[hugozielo 0]

Como fazer uma div que eu possa arrastar e soltar em qualquer ponto da tela.

[DSerma 19]

Toma um exemplo que fiz para meus estudos:

 

<script>
document.onmousemove = mouseMove;
document.onmouseup   = mouseUp;

var dragObject  = null;
var mouseOffset = null;

function getMouseOffset(target, ev){
	ev = ev || window.event;

	var docPos	= getPosition(target);
	var mousePos  = mouseCoords(ev);
	return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function getPosition(e){
	var left = 0;
	var top  = 0;

	while (e.offsetParent){
		left += e.offsetLeft;
		top  += e.offsetTop;
		e	 = e.offsetParent;
	}

	left += e.offsetLeft;
	top  += e.offsetTop;

	return {x:left, y:top};
}

function mouseMove(ev){
	ev		   = ev || window.event;
	var mousePos = mouseCoords(ev);

	if(dragObject){
		dragObject.style.position = 'absolute';
		dragObject.style.top	  = mousePos.y - mouseOffset.y;
		dragObject.style.left	 = mousePos.x - mouseOffset.x;

		return false;
	}
}
function mouseUp(){
	dragObject = null;
}

function makeDraggable(item){
	if(!item) return;
	item.onmousedown = function(ev){
	//item.style.cursor = 'move';
		dragObject  = this;
		mouseOffset = getMouseOffset(this, ev);
		return false;
	}
}
</script>

<table align = "left" id = "dragt0">
<tr>
<td>

<div id="msgbox" name="msgbox" class="msgbox">
   <div id="titulo" name="titulo" onMouseOver="makeDraggable(dragt0); this.style.cursor='move';">
	<span id="tit_fechar" name="tit_fechar">
	 <p><a href="#" name="fechar" id="fechar" title="Fechar" onClick="java script: dragt0.style.display = 'none';">[X]</a></p>
	</span>
	<span id="tit" name="tit">
	 <p>Monlline Decorações</p>
	</span>

   </div>
   <div id="conteudo" name="conteudo">
	<div id="mensagem" name="mensagem">
	 <a href = "Galeria/0002-1.jpg" rel = "lightbox[teste]" title = "Galeria Monlline....">
	 <img src = "Galeria/0002-1.jpg" border = "0" width = "100px" height = "100px">
	 </a>
	</div>
	</div>
   </div>

  
  </td>
  </tr>
</table>

O exemplo pode ser visto aki: http://189.47.171.184:8080/Galeria.asp

 

 

 

Abraços....