Ir para conteúdo

POWERED BY:

Arquivado

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

DackAle

Arrastar imagem

Por , em Javascript

Recommended Posts

DackAle    0

DackAle
Postado

Olá pessoalSeguinte, estou com uma idéia na cabeça, mas não sei muito bem como desenvolver, vamos lá:No meu painel de controle, gostaria de dividir a parte de inserção de registro em duas partes, uma com os formulário text, textarea e etc e ao lado, um iframe com imagens pequenas que o usuário insere no banco de dados.Eu gostaria que ao clicar e arrastar a imagem para o textarea, aparecesse o endereço da imagem no textarea, parecido com o arrastar convencional do Windows, você puxa um documento para outra pasta e aparece o documento lá, mas ao invés do documento, aparece um endereço por exemplo.Alguém tem alguma idéia de como desenvolver algo assim ?No caso gostaria de criar uma solução fácil para interagir conteúdo com imagens para o cliente, sem usar aqueles editores prontos por exemplo.Se alguém puder me ajudar, fico muito grato.Abraços e valeu galera

Compartilhar este post

Link para o post
Compartilhar em outros sites

void    1

void
Postado

bom você ja tem o script para fazer o drag and drop??

Compartilhar este post

Link para o post
Compartilhar em outros sites

void    1

void
Postado

pronto

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head><title>Mootools Drag and Drop Example</title><style type="text/css">body {color:#000;background-color:#FFF; font-family:Arial, Helvetica, sans-serif;}#dragger, #dragger2 {border:1px solid #444444;position:relative;z-index:50;padding:4px;}.drag {background-color:#f1f1f1;}</style><script type="text/javascript" src="http://www.snook.ca/technical/mootoolsdragdrop/mootools.release.51.js"></script><script type="text/javascript">var valor;  var draggableOptions = {	  onStart:function()	  {		this.el.setOpacity(.5);		valor=this.el.src;	  },	  onComplete:function()	  {		// put the element back where it belongs		this.el.setOpacity(1);		this.el.style.left = 0;		this.el.style.top = 0;	  }  };  var droppableOptions = {	  onOver:function(){		  this.addClassName('dragover');	  },	  onLeave:function(){		this.removeClassName('dragover');	  },	  onDrop:function(){		//this.addClassName('dropped');		this.value = valor;		valor="";	  }  }  window.onload=function()  {	var dropitems = document.getElementsBySelector('.item');	dropitems.each(function(drop){ drop.extend(droppableOptions)   });	draggableOptions.droppables = dropitems;	$('dragger').addClassName('drag').makeDraggable(draggableOptions);	$('dragger2').addClassName('drag').makeDraggable(draggableOptions);  }  </script></head><body>  <h1>Mootools Drag and Drop example</h1>	<img id="dragger" src="http://www.gabbay.com.br/upload/arquivos/secret_smile.jpg">	<img id="dragger2" src="http://www.gabbay.com.br/upload/arquivos/exciting.jpg">  <textarea class="item" name="teste" id="teste"></textarea></body></html>

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