Ir para conteúdo

Arquivado

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

mzaidan

Arrastar imagem e substituir

Por , em Javascript

Recommended Posts

mzaidan    2

mzaidan
Postado

Prezados, o que eu estou tentando fazer é o seguinte:



http://www.hufersil.com.br/exemplo/drag-drop/



Note que as imagens são arrastadas e jogadas para dentro do local determinado.



Eu estava precisando de algo que, quando eu jogasse uma imagem la pra dentro, a que estava la voltasse pro local de origem e fosse substituída pela outra.



Alguém poderia dar uma luz?



Segue o código:




<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Imagens</title>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>

	<script type="text/javascript">

	// quando terminar de carregar o script

	$(function(){

		// fazemos com que todas as imagens da lista possam ser arrastadas

		$('.available li img').draggable({

			helper: 'clone'

		});


		// a área do "papel" será onde os itens podem ser soltos

		$('#area-itens').droppable({

			// quando soltar um item no "papel"...

			drop: function(evt, ui){

				// se o pai do item já for o "papel"

				if(ui.draggable.parent()[0] == this){

					// nao faz nada

					return;

				}


				// referencia ao "papel", mais curta

				var t = $(this);

				// copia do elemento arrastado

				var e = ui.draggable;

				// diferenca entre a posicao do mouse e a posicao do elemento quando for solto

				var diff = {x: evt.pageX - ui.position.left, y: evt.pageY - ui.position.top};

				// tiramos o "helper" do elemento ao ser arrastado

				e.draggable('option','helper','');

				// pegamos o elemento pai do elemento arrastado (a "li")

				var parent = e.parent();

				// colocamos o elemento arrastado no papel

				e.appendTo(t);

				// removemos o elemento pai anterior do elemento arrastado (a "li")

				parent.remove();


				// calculando novo posicionamento dentro do papel

				e.css({

					position: 'absolute',

					left: evt.pageX - t.offset().left - diff.x,

					top: evt.pageY - t.offset().top - diff.y

				});

			}

		});


		// ao clicar no botao de salvar a imagem

		$('#btnSalvar').click(function(evt){

			// elemento contendo o status

			var s = $('.status'),

				// dados a serem enviados para o servidor

				data={},

				// area dos itens

				area = $('#area-itens'),

				// tamanho da pagina

				pageSize = {width:area.width(),height:area.height()},

				// elementos escolhidos pelo usuario

				itens=[];


			// para cada elemento dentro da pagina

			area.find('.itens').each(function(){

				// referencia ao elemento atual

				var t=$(this),

					// criamos um novo objeto com as propriedades desejadas

					// para geração do arquivo final

					item = {

						src: this.src,

						width: t.width(),

						height: t.height(),

						x: t.position().left,

						y: t.position().top

					};

				// colocamos na lista de itens que serão usados para compor

				// a nova imagem

				itens.push(item);

			});


			// colocamos os dados no objeto para

			// enviar para geração da imagem

			data.area = pageSize;

			data.itens = itens;


			// muda o status para aguardar

			s.html('Aguarde...');

			// envia para o PHP gerar a imagem final

			$.post('gerar.php', data, function(link){

				// quando receber a resposta, mostra o Link para baixar a imagem

				s.html('Imagem gerada: <a target="_blank" href="'+link+'">Clique aqui para baixar</a>');

			});

		});

	});


	</script>	


	<style type="text/css">

		#area-itens {

			position: relative;

			float: left;

			width: 300px;

			height: 450px;

			border: 1px solid black;

			overflow: hidden;

		}


		.available {

			float: right;

		}


		.buttons {

			clear: both;

		}


	</style>


</head>

<body>


	<p>Arraste as imagens da direita para a "área do papel" abaixo</p>


	<!--  area do "papel"  -->

	<div id="area-itens">

	</div>


	<!--  lista de elementos que servem para o usuario compor a nova imagem -->

	<ul	class="available">

		<li><img src="imagens/imagem1.jpg" class="itens" /></li>

		<li><img src="imagens/imagem2.jpg" class="itens" /></li>

		<li><img src="imagens/imagem3.jpg" class="itens" /></li>

		<li><img src="imagens/imagem4.jpg" class="itens" /></li>

	</ul>


	<div class="buttons">

		<input type="button" value="Salvar Imagem" id="btnSalvar" />

	</div>


	<div class="status"></div>


</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

CL4nG    36

CL4nG
Postado

Quando uma imagem for adicionada em area-itens (OnDragDrop) você verifica se tem imagens na lista e então move para a lista de elementos, para só então adicionar a outra imagem.

Compartilhar este post

Link para o post
Compartilhar em outros sites

mzaidan    2

mzaidan
Postado

Consegui aqui, bloquear a segunda imagem de ir, caso já exista uma.

Só dei uma travada pra fazer a troca das imagens.

Alguém pode ajudar?

Compartilhar este post

Link para o post
Compartilhar em outros sites

mzaidan    2

mzaidan
Postado

hehehehe

Eu não estou conseguindo fazer a troca das imagens.

Tipo, quando a outra for para o local, pegar a que ja esta la e fazer ela "voltar" pro local de origem.

Compartilhar este post

Link para o post
Compartilhar em outros sites

CL4nG    36

CL4nG
Postado

mzaidan,

Obtenha o elemento <li>:

var elem = $("li da lista esquerda").html();

Remova o elemento de onde ele está:

$("elemento li").remove();

E adicione-o na outra lista:

$("ul lista direita").append(elem);

Obs.: Não é só pegar o código aqui e jogar lá pra funcionar... Só te mostrei protótipos... Mas é dessa forma que se faz...
De onde você vai retirar o elemento, como vai colocar, aí é com você...

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