Jump to content
Sign in to follow this  
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);
Edited by William Bruno
Adicionar code

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.