Querría hacer un drag and drop con HTML5 entre dos areas, la primera llamada visible y la segunda llamada invisible.
El drag and drop no he tenido ningún problema.
El problema es que mi objetivo es hacer visibles y ocultar distintos div´s dependiendo de en que area están (visible o invisible). Podrían ayudarme.
Adjunto imagen y código.
Código:
<!DOCTYPE html
SYSTEM "about:legacy-compat">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Institut für Plagiatforschung</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/theme.css">
<link rel="stylesheet" href="css/article.css">
<link rel="stylesheet" href="css/ribbon.css">
<link rel="stylesheet" href="css/print.css" media="print"><script src="js/vendor/modernizr-2.6.2.min.js"></script>
<style type="text/css">
#box1{
float:left; width:350px; height:200px; padding:5px; margin:5px; border:1px solid #aaaaaa;
}
#box2{
float:right; width:350px; height:200px; padding:5px; margin:5px; border:1px solid #aaaaaa;
}
#box1 { background-color: white; }
#box2 { background-color: grey; }
#box1>p , #box2>p {
text-align:center;
}
#drag1, #drag2, #drag3, #drag4 {
width:174px; height:25px; padding:5px; margin:5px;
border:1px solid black;
}
</style>
<script>
function visible(){
var id= new Array();
var caja=document.getElementById("box1");
for( var i = 0; i < caja.childNodes.length; i++ ) {
if (caja.childNodes[i].nodeType === 1) {
var id1=caja.childNodes[i].getAttribute('id');
id[i]=id1;
}
}
for( var i = 0; i < id.length; i++ ) {
document.id[0].style.visibility="visible"
¿?¿?style="visibility:hidden";
}
}
}
function inVisible(){
drag1.style.visibility="hidden"
}
</script>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="content">
<header>
<div id="tophead">
<h1>Willkommen</h1>
</div><img src="img/theme.png" alt="theme"><div class="ribbon">
<p><span>Institut für Plagiatforschung</span></p>
</div>
</header>
<aside id="navbox">
<h2>Aktuelles</h2>
<nav>
<ul>
<li><a href="index.html" class="active">Aktuelles</a></li>
<li><a href="forschung.html">Forschung</a></li>
<li><a href="mitarbeiter.html">Mitarbeiter</a></li>
</ul>
</nav>
</aside>
<div id="main">
<article >
<header>
<hgroup>
<h1>Darstellungsoptionen</h1>
</hgroup>
</header>
<div id="box1" ondrop="drop(event)" ondragover="allowDrop(event)">
<p> Visible </p>
<p draggable="true" ondragstart="drag(event)" id ="drag1"> Meta-Information </p>
<p draggable="true" ondragstart="drag(event)" id ="drag2"> Section 1</p>
</div>
<div id="box2" ondrop="drop(event)" ondragover="allowDrop(event)" >
<p> Invisible </p>
<p draggable="true" ondragstart="drag(event)" id ="drag3"> Section 2 </p>
<p draggable="true" ondragstart="drag(event)" id ="drag4"> Profreader </p>
</div>
<!--<script type="text/javascript"> visible(); </script>-->
</article>
<article>
<header>
<hgroup>
<h1>Meta-Informationen</h1>
</hgroup>
</header>
<p>
Document-ID: 1001<br>
Codename: pegasus<br>
Eingesandt: 1.11.2011
</p><br>
<p><u>Verwendete Dateien:</u><br><ul>
<li><a href="rip-offs-new.xml">rip-offs-new.xml</a></li>
<li><a href="document.xml">document.xml</a></li>
</ul>
</p>
</article>
<article>
<header>
<hgroup>
<h1>Section: 1</h1>
<h2>
Paragraph: 2,
Einstufung:
<span class="critical">Kritisch</span></h2>
</hgroup>
</header>
<p><u>Inhalt:</u><br>
Darf nich angezeigt werden!
</p><br><p><u>Weitere Informationen:</u><br>
Beschreibung: Hier wurde kopiert!<br>
Proofreader:
<abbr title="Chuck Norris">cn1</abbr><sup><a href="#reader_cn1">1</a></sup>
<abbr title="Clark Kent">ck1</abbr><sup><a href="#reader_ck1">2</a></sup>
<br>
Quellen, aus denen kopiert wurde:
<ul>
<li><a href="http://de.wikipedia.de/">http://de.wikipedia.de/</a></li>
<li>Musterbuch<br>
Autor: Max Mustermann<br>
Page: 4
</li>
</ul>
</p>
</article>
</div><script src="js/vendor/jquery-1.8.2.min.js"></script><script src="js/plugins.js"></script><script src="js/plugins.js"></script></body>
</html>
