Drag and Drop
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)][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)][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);Discussão (0)
Carregando comentários...