Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

João Prado

colocando Drag and Drop no meu site

Por , em Javascript

Recommended Posts

João Prado    64

João Prado
Postado

Boa tarde.

 

Eu tenho um codigo para colocar drag and drop na pagina e eu queria aperfeiçoa-lo. ele tem o efeito de mover, mas eu queria colocar um efeito tipo do iGoogle para minimizar a div.

 

segue o codigo que uso:

 

<script>

var objSelecionado = null;
var mouseOffset = null;
function addEvent(obj, evType, fn) {

if (typeof obj == "string") {
  if (null == (obj = document.getElementById(obj))) {
   throw new Error("Elemento HTML não encontrado. Não foi possível adicionar o evento.");
  }
}
if (obj.attachEvent) {
  return obj.attachEvent(("on" + evType), fn);
} else if (obj.addEventListener) {
  return obj.addEventListener(evType, fn, true);
} else {
  throw new Error("Seu browser não suporta adição de eventos. Senta, chora e pega um navegador mais recente.");
}
}
function mouseCoords(ev){
	if(typeof(ev.pageX)!=="undefined"){
	  return {x:ev.pageX, y:ev.pageY};
	}else{
		return {
		  x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		  y:ev.clientY + document.body.scrollTop  - document.body.clientTop
		};
	}
}
function getPosition(e, ev){
	var ev = ev || window.event;
	if(e.constructor==String){ e = document.getElementById(e);}
	var left = 0, top  = 0;
	var coords = mouseCoords(ev);	

	while (e.offsetParent){
	  left += e.offsetLeft;
	  top  += e.offsetTop;
	  e	 = e.offsetParent;
	}
	left += e.offsetLeft;
	top  += e.offsetTop;
	return {x: coords.x - left, y: coords.y - top};
}

function dragdrop(local_click, caixa_movida) {
	if(local_click.constructor==String){ local_click = document.getElementById(local_click);}
	if(caixa_movida.constructor==String){ caixa_movida = document.getElementById(caixa_movida);}

	local_click.style.cursor = 'move';
	if(!caixa_movida.style.position || caixa_movida.style.position=='static'){
		caixa_movida.style.position='relative'
	}
	local_click.onmousedown = function(ev) {
		objSelecionado = caixa_movida;
		mouseOffset = getPosition(objSelecionado, ev);
	};
	document.onmouseup = function() {
		objSelecionado = null;
	}
	document.onmousemove = function(ev) {
		if (objSelecionado) {
			var ev = ev || window.event;
			var mousePos = mouseCoords(ev);
			var pai = objSelecionado.parentNode;
			objSelecionado.style.left = (mousePos.x - mouseOffset.x - pai.offsetLeft) + 'px';
			objSelecionado.style.top = (mousePos.y - mouseOffset.y - pai.offsetTop) + 'px';
			objSelecionado.style.margin = '0px';
			return false;
		}
	}
}</script>
<body>
<div id='movido' style='border: 1px solid black; width: 200px; '>
<p id='movedor' style='border: 1px solid blue;'>mova</p>
sou a div lálalá
<br />
lálálá
</div>
<script>
dragdrop('movedor','movido');
</script>
</body>

quem souber como fazer isto posta ai e se alguem tiver um tutorial de como fazer isso posta tbm pq sou iniciante e gostaria de aprender.

 

agradeço desde ja.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Tópico Movido:

Webstandards: CSS / XML / XHTML / HTML http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Javascript/DHTML

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito