Ir para conteúdo

POWERED BY:

Arquivado

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

juan1992carlos

Drag And Drop - Preciso Inserir Condições

Por , em Javascript

Recommended Posts

juan1992carlos    0

juan1992carlos
Postado

Boa tarde!

Sou novo no Curso de Ciências da Computação.

Me deparei com um projeto de Drag And Drop que o professor solicitou... consegui executar a tarefa, porém, gostaria de incrementar com condicionais... meu código esta abaixo:

Gostaria de criar uma função para não permitir que uma determinada imagem entre em um caixa que não seja a que estiver o seu nome.

Gostaria de saber se algum colega poderia me ajudar?

Meu Script

<script language="javascript" type="text/javascript">
 
//permite soltar
function allowDrop(ev){
   ev.preventDefault();
}
//arrrasta
function drag(ev){
   ev.dataTransfer.setData("conteudo", [url=http://ev.target.id/]ev.target.id[/url]);
}
//solta
function drop(ev){
   ev.preventDefault();
   var image = ev.dataTransfer.getData("conteudo");
   ev.target.appendChild(document.getElementById(image));
 
}
 
  
</script>

CÓDIGO COMPLETO

<!DOCTYPE HTML>
<html>
<head>
<style>
 
#alvo1 
{
position: relative;
left: 0px;
width: 200px;
height: 240px;
background-color: white;
margin-top: 30px;
border-radius: 5px;
border: 2px solid black;
float: left
}
#alvo2
{
position: relative;
left: 5px;
width: 200px;
height: 240px;
background-color: white;
margin-top: 30px;
border-radius: 5px;
border: 2px solid black;
float: left
}
 
#alvo3{
position: relative;
left: 10px;
width: 200px;
height: 240px;
background-color: white;
margin-top: 30px;
border-radius: 5px;
border: 2px solid black;
float: left;
}
#alvo4{
position: relative;
left: 15px;
width: 200px;
height: 240px;
background-color: white;
margin-top: 30px;
border-radius: 5px;
border: 2px solid black;
float: left;
}
#alvo5{
position: relative;
left: 20px;
width: 200px;
height: 240px;
background-color: white;
margin-top: 30px;
border-radius: 5px;
border: 2px solid black;
float: left;
}
#alvo6{
position: relative;
left: 25px;
width: 200px;
height: 240px;
background-color: white;
margin-top: 30px;
border-radius: 5px;
border: 2px solid black;
float: left;
}
 
#cx1
{
position: relative;
left: 10px;
width: 200px;
height: 240px;
float: left;
margin-top: 50px;
}
 
#cx2
{
position: relative;
left: 20px;
width: 200px;
height:240px;
float: left;
margin-top: 50px;
}
 
#cx3
{
position: relative;
left: 50 px;
width: 180px;
height: 240px;
float: left;
margin-top: 50px;
}
#cx4
{
position: relative;
left: 70 px;
width: 180px;
height: 240px;
float: left;
margin-top: 50px;
}
#cx5
{
position: relative;
left: 80px;
width: 180px;
height: 240px;
float: left;
margin-top: 50px;
}
#cx6
{
position: relative;
left: 100px;
width: 180px;
height: 240px;
float: left;
margin-top: 50px;
}
</style>
<script language="javascript" type="text/javascript">
 
//permite soltar
function allowDrop(ev){
   ev.preventDefault();
}
//arrrasta
function drag(ev){
   ev.dataTransfer.setData("conteudo", [url=http://ev.target.id/]ev.target.id[/url]);
}
//solta
function drop(ev){
   ev.preventDefault();
   var image = ev.dataTransfer.getData("conteudo");
   ev.target.appendChild(document.getElementById(image));
 
}
 
  
</script>
<center></head><center>
<body>
<h1>Ciência da computação</h1>
<p>Cada um no seu quadrado!</p>
<div id="caixadeResposta">
<div id="alvo1" ondrop="drop(event)" ondragover="allowDrop(event)">Juan Carlos
</div>
<div id="alvo2" ondrop="drop(event)" ondragover="allowDrop(event)">Cleiton jose
</div>
<div id="alvo3" ondrop="drop(event)" ondragover="allowDrop(event)">Marcos
</div>
<div id="alvo4" ondrop="drop(event)" ondragover="allowDrop(event)">Nicolas
</div>
<div id="alvo5" ondrop="drop(event)" ondragover="allowDrop(event)">Tamara Maria
</div>
<div id="alvo6" ondrop="drop(event)" ondragover="allowDrop(event)">Jose Ailton
</div>
 
 
</div> <!-- end of answerBoxes -->
<div id="whatsWhatContent">
<div id="resposta">
 
 
   <div id="cx1" ondrop="drop(event)" ondragover="allowDrop(event)">
     <img id="resposta1" src="eu.jpg"  draggable="true"    ondragstart="drag(event)" alt="Juan"/>
   </div>
 
   <div id="cx2" ondrop="drop(event)" ondragover="allowDrop(event)">
       <img id="resposta2" src="cleiton.jpg"  draggable="true" 
ondragstart="drag(event)" alt="Cleiton">
</div>
 
<div id="cx3" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img id="resposta3" src="marcos.jpg"  draggable="true" ondragstart="drag(event)" alt="Marcos">
</div>
<div id="cx4" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img id="resposta4" src="nicolas.jpg"  draggable="true" ondragstart="drag(event)" alt="Nicolas">
</div>
<div id="cx5" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img id="resposta5" src="tamara.jpg"  draggable="true" ondragstart="drag(event)" alt="Tamara">
</div>
 
<div id="cx6" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img id="resposta6" src="ailton.jpg"  draggable="true" ondragstart="drag(event)" alt="Ailton">
 
</body>
</html>

DESDE JÁ, AGRADEÇO.

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