Ir para conteúdo

Arquivado

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

brunomartins

Drag and Drop

Recommended Posts

Pessoal, por favor me ajudem...

 

Eu queria que uma imagem so ficasse no quadrado..

Quando uma imagem ja tivesse em um quadrado, e quando eu tentasse colocar a outra imagem, a primeira voltaria ao seu lugar de origem.

Ficando assim a segunda no lugar do primeiro...

 

ta aki o codigo:

 

<!DOCTYPE html>
<html lang="en">
<head>
<script language="javascript" src="js.js"></script>
<script type="text/javascript" src="[url=http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js]http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>[/url]
<script type="text/javascript" src="[url=http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js]http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>[/url]
<style>

#leftbox{
background-color: #E3E3E3;
float:left;
width: 100px;
height: 100px;
margin-left: 650px;
border: 1px solid blue;
}
 

#rightbox{
float:right;
width: 40px;
height: 100px;
margin: 5px;
border: 1px solid green;
}
 
#rightbox2{
float:right;
width: 40px;
height: 100px;
margin: 120px -48px 0px 0px;
border: 1px solid green;
}
 
 #facepic{
  width:30px;height:90px;
  cursor: pointer;
 }
 
 #facepic2{
  width:30px;height:90px;
 }
</style>
 
</head>
<body>
<div id="caixasesquerda">
<div id="leftbox" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">
</div>
</div>
<div id="caixasdireita">
<div id="rightbox" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">
<img id="facepic" src="02.jpg"  ondragstart=" return dragStart(event)">
</div>
<div id="rightbox2" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">
<img id="facepic2" src="01.jpg"  ondragstart=" return dragStart(event)">
</div>
</div>
</body>
</html>
 
Js:

 

var elem_origen;
var elem_destino;
 
function doFirst(){
elem_destino=document.getElementById("leftbox");
elem_destino.addEventListener("dragleave",saliendo,false);
elem_destino.addEventListener("dragenter",entrando, false);
//elem_destino.addEventListener("dragleave",movimento, false);
}
 
function allowDrop(ev){
ev.preventDefault();
 
}
 
function dragStart(ev){
ev.dataTransfer.setData("ID",ev.target.getAttribute('id'));
}
 
function dragOver(ev){
return false;
}
 
function dragDrop(acao){
var produtoSelecionado= acao.dataTransfer.getData("ID");
acao.target.appendChild(document.getElementById(produtoSelecionado));
 
}
 
function saliendo(e){
e.preventDefault();
elem_destino.style.background="#E3E3E3";
//elem_destino.style.visibility="visibility";
}
 
function entrando(e){
e.preventDefault();
elem_destino.style.background="#87CEEB";
//elem_destino.style.background="#98FAF9";
}
 
window.addEventListener("load",doFirst,false);

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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