https://ibb.co/h4AC4b
en el primer ejemplo puede ver las dos patallas la idea del proyecto es poderlas cambiar de lugar
https://ibb.co/dwU5Pb
cuando hago el cambio de la imagen el drag and drop se hace perfecto pero lo que deseo es que la imagen que queda abajo se vaya al otro div es posible hacerlo?
https://ibb.co/iOsQPb
codigo:
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="jquery-1.12.4.js"></script>
<script src="jquery-ui.js"></script>
<style>
#panel1{
width: 600px;
height: 100%;
border: 1px solid #000000;
float: left;
position: absolute;
z-index: 10px;
}
#data1{
width: 100%;
height: 100%;
margin: 0 0 0px 0px;
background: url(pics/panel1.png) no-repeat;
background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
-webkit-background-size: 100%;
-khtml-background-size: 100%;
}
#panel2{
float: right;
border: 1px solid #000000;
width: 640px;
height: 300px;
}
#data2{
width: 100%;
height: 100%;
margin: 0 0px 0px 0px;
background: url(pics/panel2.png) no-repeat;
background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
-webkit-background-size: 100%;
-khtml-background-size: 100%;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
ev.dataTransfer.
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<title>Boseto pantallas</title>
</head>
<body>
<div id="panel1" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="data1" draggable="true" ondragstart="drag(event)">
</div>
</div>
<div id="panel2" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="data2" draggable="true" ondragstart="drag(event)">
</div>
</div>
</body>
</html>
