Operação Drag and Drop no Formulário

[daniel.giacomelli]

Neste tutorial, vou mostrar como implementar uma operação Drag and Drop no Formulário Dinâmico.

O objetivo é mover mover alguns elementos de uma <div> para outra. Você pode conferir este exemplo em funcionamento clicando aqui.

Estrutura do Formulário

Campos

• elmDraggableElements: Campo do tipo HtmlElement que vai conter os elementos que podem ser arrastados. Informe o código abaixo na propriedade Template Html:

  <div id="draggableElements">
  	<div draggable="true" id="div1" ondragstart="drag(event)">Div 1</div>
  	<div draggable="true" id="div2" ondragstart="drag(event)">Div 2</div>
  	<div draggable="true" id="div3" ondragstart="drag(event)">Div 3</div>
  </div>
  

• elmDropArea:Campo do tipo HtmlElement onde será possível “soltar” os elementos arrastados. Será a área de destino da operação Drag-and-Drop. Informe o código abaixo na propriedade Template Html:

  <div id="dropArea" style="width:100%;height:100%"
  	ondrop="drop(event)"
  	ondragover="allowDrop(event)">
  </div>
  

• btnFakeButton: Campo do tipo Button. Este será um botão “falso”. Ele não precisa ser exibido no Formulário. Ele será usado apenas como gatilho para realizar a operação no lado do servidor. Ao concluir a operação Drag-and-Drop, vamos disparar o evento Click deste botão para conseguirmos processar a informação nos procedimentos do Formulário.

Procedimentos

• btnFakeButton_Click: Procedimento que será chamado no evento Click do botão btnFakeButton. Adicione um parâmetro chamado items no procedimento. Neste parâmetro receberemos um texto com o conteúdo de todos os items arrastados, separados por vírgula.
  Adicione uma instrução Mostrar Mensagem para exibir o valor deste parâmetro. O procedimento deve ficar assim:

  

Arquivos JavaScript

Adicione um arquivo JavaScript no Formulário. Neste exemplo, o arquivo chama-se demo-drag-and-drop.js, mas você pode usar o nome de sua preferência.

No arquivo JavaScript, informe o código abaixo:

function allowDrop(ev) {
	ev.preventDefault();
}

function drag(ev) {
	ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
	let data = ev.dataTransfer.getData("Text");
	ev.target.appendChild(document.getElementById(data));
	ev.preventDefault();
	
	// Dispara evento no servidor
	let arguments = { items: getDraggedItems().join(', ') }
	sendData(arguments);
}

function getDraggedItems() {
	let arr = [];
	let i; 
	let draggedElements = document.getElementById('dropArea').children;
	
	for(i = 0; i < draggedElements.length; i++) {
		arr.push(draggedElements[i].innerHTML);
	}
	return arr;
}

function sendData(jsonData) {
	
	// Obtém instância do Form Dinâmico
	let form = latromi.formManager.getFormInstance();
	
	// Dispara o evento click do botão "Fake", passando JSON como argumento
	form.raiseFieldEvent('btnFakeButton', 'Click', jsonData );
}

Layout

Use o Layout Absoluto para conseguir dispor os Campos mais ou menos dessa forma:

Executando no Navegador

Pronto, o objetivo de arrastar as <div> foi cumprido! Para testar, clique no link “Abrir no Navegador” e arraste os objetos de um lado para outro.