Ir para conteúdo

POWERED BY:

Arquivado

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

JotaWeb

Drag and Drop

Por , em Desenvolvimento de Games

Recommended Posts

JotaWeb    0

JotaWeb
Postado

Bom dia caros amigos, estou desenvolvendo uma aplicação para dispositivos móveis e me deparei com um problema:

 

o Drag and Drop não funciona, testei no i-phone 4 e no i-pad 1...

 

Alguém já passou por este problema ou tem um auxilio...

Compartilhar este post

Link para o post
Compartilhar em outros sites

JotaWeb    0

JotaWeb
Postado 

<!DOCTYPE html >
<html >
<head>
<meta  charset="UTF-8" />
<title>CURSO HTML 5 </title>
<script> 
/*-----------------
EVENTOS DRAG N DROP
----------------- */
//**dragstart = (Evento disparado quando é iniciado o arraste do objeto)
//**dragenter = (Evento disparado quando o ponteiro do mouse é posicionado primeiro sobre o objeto)
//**dragover  = (Evento disparado quando o ponteiro do mouse está sobre o objeto quando ocorre o arraste)
//**dragleave = (Evento disparado quando o mouse deixa o objeto de arraste)
//**drag      = (Evento disparado quando o objeto está sendo arrastado)
//**drop      = (Evento disparado quando o objeto é solto do arraste)
//**dragend   = (Evento disparado enquanto o botão do mouse é liberado do arraste)

function dragStart(ev){
//Define o tipo de operação permitida
//Parâmetros: none, copy, copyLink, copyMove, link, linkMove, move, all and uninitialized.
ev.dataTransfer.effectAllowed = 'move';
//Adiciona os dados configurados
//setData(formato,dados)
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
//Define os elementos de imagem para arraste
//setDragImage(elemento,x,y);
 ev.dataTransfer.setDragImage(ev.target,0,15);
 return true;
};

function dragEnter(ev) {
  ev.preventDefault();
  return true;
};

function dragOver(ev) {
	ev.target.innerHTML = 'Solte aqui!';
   return false;
};

function dragDrop(ev) {
ev.target.innerHTML = '';
  var src = ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(src));
  ev.stopPropagation();
  return false;
};

function dragLeave(ev) {
	ev.target.innerHTML = '';
   return false;
};
</script> 
<style>
div {
	-moz-user-select: none;
	float: left;
	padding: 10px;
	margin: 10px;
	cursor: pointer;
}
#boxA {
	background: #990;
	height: 100px;
	width: 100px;
}
#boxB {
	background: #36F;
	height: 250px;
	width: 250px;
}
</style>
<body>
 <header>
   <h1>Exemplo de Drag and Drop HTML 5</h1>
 </header>
 <section>
   <article>
		<div id="boxA" draggable="true" ondragstart="return dragStart(event)">
  			<p>Arraste-me!</p>
		</div>
       <div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)" ondragleave="return dragLeave(event)"></div>
     </article>
 </section>
</body>
</html>

 

 

Não funciona!!! :ermm:

Compartilhar este post

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

Informação importante

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

  Aceito