DRAG AND DROP HTML, Javascript
No meu TCC eu tenho que utilizar a função drag and drop para arrastar um objeto para dentro de uma div e até que estou conseguindo.
Porém, sempre que arrasto um objeto numa div, ele não fica onde foi arrastado, ele por padrão(acho) vai parar do lado do último objeto arrastado.
Gostaria de saber como fazer o objeto ficar em qualquer lugar dentro da div.
Grato!!
[url:descricao=Imagem do que está acontecendo]http://prnt.sc/cbhy3h[/url]
Porém, sempre que arrasto um objeto numa div, ele não fica onde foi arrastado, ele por padrão(acho) vai parar do lado do último objeto arrastado.
Gostaria de saber como fazer o objeto ficar em qualquer lugar dentro da div.
Grato!!
[url:descricao=Imagem do que está acontecendo]http://prnt.sc/cbhy3h[/url]
<!DOCTYPE html>
<?php
include ('php/verificar.php');
?>
<html lang="pt-br">
<head>
<meta charset="utf-8"/>
<title>Foodye | Mesas</title>
<link href="estilo.css" rel="stylesheet" type="text/css"/>
<style>
#div2 {width:500px;height:200px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var nodeCopy = document.getElementById(data).cloneNode(true);
nodeCopy.id = "newId";
ev.target.appendChild(nodeCopy);
}
function del(ev)
{
ev.preventDefault();
var data= ev.dataTransfer.getData("Text");
var ev = document.getElementById(data);
ev.parentNode.removeChild(ev);
}
</script>
</head>
<body>
<div id="header" class="container">
<div id="logo">
<h1><a href="Index.php">FOODYE</a></h1>
</div>
<div id="menu">
<ul>
<li><a href="index.php" >HOME</a></li>
<li><a href="restaurantes.php" >RESTAURANTES</a></li>
<li><a href="contato.php" >CONTATO</a></li>
<li> <a href="php/logout.php"> SAIR </a></li>
</ul>
</div>
</div>
<div id="corpo">
<div id="perfil">
<div id="objetos" ondrop="drop(event)" ondragover="allowDrop(event)">
<img id="drag1" class="mesa" src=" images/mesa.png" draggable="true" ondragstart="drag(event)" width="50" height="50">
</div>
<div id="restaurante" >
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="delete" ondrop="del(event)" ondragover="allowDrop(event)"><h3>Deletar</h3> </div>
</div>
</div>
</div>
<div id="rodape" class="container">
<p>© FOODYE. TODOS OS DIREITOS RESERVADOS</p>
</div>
</body>
</html>
Daniel Marques
Curtidas 0