Publicado em 25 de abr.

Drag and Drop

#desenvolvimento de games

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...

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

hinom· 27 de abr.

mostre o que fez, como está fazendo..

JotaWeb· 4 de mai.

<!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: